H5頁面音頻怎么自動播放？

HTML5 是下一代的 HTML， 提供了展示視頻的標準，規(guī)定了一種通過 Video 元素來包含視頻的標準方法。

純H5頁面在手機端中是無法實現(xiàn)自動播放，移動端瀏覽器大部分是禁用video和audio的autoplay功能并且，很多移動瀏覽器也不支持首次js調(diào)用play方法進行播放（只有用戶手動點播放后暫停，然后用代碼進行play可以）。

這樣做主要是為了防止不必要的自動播放浪費流量。

以下代碼是實現(xiàn)用戶第一次觸摸后實現(xiàn)的播放和微信app下自動播放

XML/HTML Code復(fù)制內(nèi)容到剪貼板

function autoPlayMusic() {

/* 自動播放音樂效果，解決瀏覽器或者APP自動播放問題 */

function musicInBrowserHandler() {

musicPlay(true);

document.body.removeEventListener('touchstart', musicInBrowserHandler);

}

document.body.addEventListener('touchstart', musicInBrowserHandler);

/* 自動播放音樂效果，解決微信自動播放問題 */

function musicInWeixinHandler() {

musicPlay(true);

document.addEventListener("WeixinJSBridgeReady", function () {

musicPlay(true);

}, false);

document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);

}

document.addEventListener('DOMContentLoaded', musicInWeixinHandler);

}

function musicPlay(isPlay) {

var media = document.getElementById('myMusic');

if (isPlay && media.paused) {

media.play();

}

if (!isPlay && !media.paused) {

media.pause();

}

}

Video有以下的屬性。

height pixels 設(shè)置視頻播放器的高度。

loop loop 如果出

現(xiàn)該屬性，則當媒介文件完成播放后再次開始播放。

preload preload 如果出現(xiàn)該屬性，則視頻在頁面加載時進行加載，并預(yù)備播放。

autoplay autoplay 如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。

controls controls 如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。

如果使用 "autoplay"，則忽略該屬性。

src url 要播放的視頻的 URL。

width pixels 設(shè)置視頻播放器的寬度。

其中，如果想要實現(xiàn)自動播放，可以在Video里面加上autoplay屬性就可以了。