在這里插入圖片描述

話說發(fā)哥四年前寫了一個網(wǎng)頁，如上圖效果，實際網(wǎng)址http://pano.z01.com ，話說做好時是正常的，突然某一天，客戶說你這個網(wǎng)站動畫不見了，這是什么原因？
結(jié)果檢查腳本一切正常。
其實也不是動畫完全消失，關(guān)鍵是要用鼠標(biāo)點擊一下，才可以播放，否則autoplay效果無用，不能播放。

后來檢查，原來是chrome的腳本機制變更造成的。
在F12調(diào)試中，會出出：

HTML5<video>報錯Uncaught (in promise) DOMException

在最新版的Chrome瀏覽器（以及所有以Chromium為內(nèi)核的瀏覽器）中，已不再允許自動播放音頻和視頻。（Google的某些做法還真是令開發(fā)者不爽）。就算你為video或audio標(biāo)簽設(shè)置了autoplay屬性也一樣不能自動播放。

<video src="YOUR_VIDEO_URL" autoplay></video>

如果你用 javascript 代碼顯式調(diào)用play方法：

<video></video>
<script type="text/javascript">
    var vdo = $("video")[0]; //jquery
    vdo.src = "YOUR_VIDEO_URL";
    vdo.oncanplay = function(){
        this.play();
    };
</script>

你將會在控制臺看到如下異常：

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

Firefox也有類似的異常提示：

NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

這是因為，Chrome只允許用戶對網(wǎng)頁進(jìn)行主動觸發(fā)后才可自動播放音頻和視頻。其實，嚴(yán)格地來說，是Chrome不允許在用戶對網(wǎng)頁進(jìn)行觸發(fā)之前播放音頻，而視頻其實是不受限制的。但因為視頻文件同樣包含了音頻，所以也一同被禁止了。Chrome這樣做的目的是為了防止開發(fā)者濫用自動播放功能而對用戶產(chǎn)生騷擾。

既然知道了原因，那就開始找解決方法。

比較常規(guī)的做法是，為video標(biāo)簽設(shè)置muted屬性，使它靜音，這樣視頻就能自動播放了，但是沒有聲音:

<video src="YOUR_VIDEO_URL" autoplay muted></video>

然后待用戶在網(wǎng)頁上有了任意觸發(fā)后，再將muted去掉，或者讓用戶手動去打開音頻（騰訊視頻就是這樣做的）：

document.body.addEventListener('mousedown', function(){
    var vdo = $("video")[0]; //jquery
    vdo.muted = false;
}, false);  

好了，我們來看看大廠的解決方案：

在這里插入圖片描述

在這里插入圖片描述

優(yōu)酷頁面打開后視頻不自動播放，需用戶點擊按鈕才開始播放，B站解決方法和優(yōu)酷一樣，愛奇藝頁面打開后視頻自動開始播放，但聲音需用戶手工開啟，所以暫時不要去想什么hack的方法了，有辦法這些大廠早用了，還是老老實實引導(dǎo)用戶手工點一下吧。