文章主要介紹了html網頁新增音樂影片的實現示例,文中透過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
1.video標籤
支援firefox自動播放 谷歌、ie不支援自動播放
<video controls="controls" autoplay="autoplay" name="media"><source src="./img/music.mp3" type="audio/mpeg"></video>
谷歌可以透過新增 muted 透過靜音來實現自動播放
<video controls="controls" autoplay="autoplay" name="media" muted><source src="./img/music.mp3" type="audio/mpeg"></video>
原理就是大多數瀏覽器在都支援靜音的影片播放
<video controls="controls" autoplay="autoplay" name="media" muted><source src="http://vjs.zencdn.net/v/oceans.mp4" type="audio/mpeg"></video>
2.audio標籤
注意：標籤定義聲音，比如音樂或其他音訊流。
<audio controls="controls" ><source src="./img/music.mp3"></audio>
注意：只能音樂不能載入影片
3.embed
可以支援多種播放器
自動播放支援安卓，不支援iOS，支援谷歌 ie ie edge 不支援firefox
<embed src="./img/music.mp3" hidden="true" autostart="true" loop="true">
<embed src="http://vjs.zencdn.net/v/oceans.mp4" autostart="true" loop="true">
補充說明：
聲音無法自動播放這個在 IOS/Android 上面一直是個慣例，桌面版的 Safari 在 2017 年的 11 版本也宣佈禁掉帶有聲音的多媒體自動播放功能，緊接著在 2018 年 4 月份釋出的 Chrome 66 也正式關掉了聲音自動播放，也就是說 <audio autopaly> <video autoplay>在桌面版瀏覽器也將失效。
谷歌說明：
可自動播放例外條件：上面我們已經提到如果影片本身已經被設定為靜音的情況下,那麼瀏覽器將不會再攔截其載入進行自動播放。同時如果使用者此前點選過自動播放的話那麼下次再訪問同樣的網站,那麼瀏覽器預設情況也不會攔截其播放,而在移動裝置上如果使用者選擇將網站新增到主螢幕上也就是經常訪問的網站,這種情況下同樣可以自動播放。
最後:根據谷歌統計資料如果網站影片被大量播放例如影片網站,這種情況下也不會被攔截掉自動播放功能
到此這篇關於html網頁新增音樂影片的實現示例的文章就介紹到這了