html網(wǎng)頁添加音樂視頻的實現(xiàn)示例

發(fā)布時間：2020-04-17 16:21:42 作者：大前端世界

這篇文章主要介紹了html網(wǎng)頁添加音樂視頻的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

1.video標簽

支持firefox自動播放谷歌、ie不支持自動播放

<video controls="controls" autoplay="autoplay" name="media"><source src="./img/music.mp3" type="audio/mpeg"></video>

谷歌可以通過添加 muted 通過靜音來實現(xiàn)自動播放

<video controls="controls" autoplay="autoplay" name="media" muted><source src="./img/music.mp3" type="audio/mpeg"></video>

原理就是大多數(shù)瀏覽器在都支持靜音的視頻播放

<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 月份發(fā)布的 Chrome 66 也正式關(guān)掉了聲音自動播放，也就是說 <audio autopaly> <video autoplay>在桌面版瀏覽器也將失效。

谷歌說明：
可自動播放例外條件：上面我們已經(jīng)提到如果視頻本身已經(jīng)被設(shè)置為靜音的情況下,那么瀏覽器將不會再攔截其加載進行自動播放。同時如果用戶此前點擊過自動播放的話那么下次再訪問同樣的網(wǎng)站,那么瀏覽器默認情況也不會攔截其播放,而在移動設(shè)備上如果用戶選擇將網(wǎng)站添加到主屏幕上也就是經(jīng)常訪問的網(wǎng)站,這種情況下同樣可以自動播放。
最后:根據(jù)谷歌統(tǒng)計數(shù)據(jù)如果網(wǎng)站視頻被大量播放例如視頻網(wǎng)站,這種情況下也不會被攔截掉自動播放功能

到此這篇關(guān)于html網(wǎng)頁添加音樂視頻的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)html添加音樂視頻內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！