前言
在最新版的Chrome瀏覽器（以及所有以Chromium為內(nèi)核的瀏覽器）中，已不再允許自動(dòng)播放音頻和視頻。（Google的某些做法還真是令開(kāi)發(fā)者不爽）。就算你為video或audio標(biāo)簽設(shè)置了autoplay屬性也一樣不能自動(dòng)播放。
<video autoplay></video>
如果你用javascript 代碼顯示地調(diào)用 play 方法：
vdo.oncanplay = function(){
this.play();
};
你將會(huì)在控制臺(tái)看到如下異常：Uncaught(in promise) DOMException。
分析原因
這是因?yàn)?，Chrome只允許用戶(hù)對(duì)網(wǎng)頁(yè)進(jìn)行主動(dòng)觸發(fā)后可自動(dòng)播放音頻和視頻。其實(shí)，嚴(yán)格地來(lái)說(shuō)，是Chrome不允許在用戶(hù)對(duì)網(wǎng)頁(yè)進(jìn)行觸發(fā)之前播放音頻，而視頻其實(shí)是不受限制的。但因?yàn)橐曨l文件同樣包含了音頻，所以也一同被禁止了。Chrome這樣做的目的是為了防止開(kāi)發(fā)者濫用自動(dòng)播放功能而對(duì)用戶(hù)產(chǎn)生騷擾。
既然知道了原因，那就開(kāi)始找解決方法。
常規(guī)解決方法
比較常規(guī)的做法是，為video標(biāo)簽設(shè)置muted屬性，使它靜音，這樣視頻就能自動(dòng)播放了，但是沒(méi)有聲音。然后待用戶(hù)在網(wǎng)頁(yè)上有了任意觸發(fā)后，再將muted去掉?；蛘咦層脩?hù)手動(dòng)去打開(kāi)音頻（騰訊視頻就是這樣做的）。
<video autoplay muted></video>
document.body.addEventListener('mousedown', function(){
vdo.muted = false;
}, false);
但是這樣給用戶(hù)的體驗(yàn)終歸不太好。那么接下來(lái)介紹一種非常規(guī)的做法。
hack方法
Chrome瀏覽器雖然對(duì)video標(biāo)簽和audio標(biāo)簽做了非常嚴(yán)格的限制，但它對(duì)另一個(gè)同樣能播放音頻和視頻的標(biāo)簽iframe的限制卻沒(méi)那么嚴(yán)格。那么我們是否可使用iframe來(lái)觸發(fā)權(quán)限呢？
<video></video>
<iframe allow="autoplay" style="display:none" src="一個(gè)空的音頻文件"></iframe>
ifm.onload = function(){
vdo.src = 'YOUR_VIDEO_URL';
vdo.oncanplay = function(){
vdo.play();
};
};
將iframe的src屬性指向一個(gè)音頻文件，使它播放音頻。為了給用戶(hù)比較好的體驗(yàn)，這個(gè)音頻文件最好是一個(gè)空的音頻文件，即沒(méi)有音頻內(nèi)容的文件，時(shí)長(zhǎng)也盡可能短一點(diǎn)，比如500ms。
當(dāng)iframe播放了這個(gè)音頻文件后，就能觸發(fā)網(wǎng)頁(yè)播放音頻的權(quán)限，這樣再來(lái)播放視頻或音頻，就沒(méi)有問(wèn)題了。
參看鏈接：
chrome 66自動(dòng)播放策略改變
