audio和EMBED配合同时兼容IE8和safiri

在HTML5中通常使用audio标签来播放背景音乐

<audio id="musicAudio" loop="" src="./media/bg.mp3" autoplay preload></audio>

同时会出现两个问题:
1、IE8不支持audio属性
2、safiri必须等待用户的交互动作后才能播放media

解决方法如下:
1、IE8不支持audio属性
通过配合使用EMBED和audio来达到同时支持IE8和其它浏览器。
if lte IE 8能够在IE8之下使用EMBED标签即可。

<!--[if lte IE 8]>
<EMBED src="./media/bg.mp3" autostart="true" loop="true" width="0" height="0">
<![endif]-->
<audio id="musicAudio" loop="" src="./media/bg.mp3" autoplay preload></audio>

2、safiri必须等待用户的交互动作后才能播放media
对于这个问题,可以使用js监听document的触摸事件,触碰就启动播放,我这里选用按下事件。
这里用了$选择器,所以需要自行添加jquery

<script>
    $(document).on("touchstart mousedown", function() {
        $("#musicAudio")[0].play();
    })
</script>
发布了24 篇原创文章 · 获赞 5 · 访问量 5万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章