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萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章