話說發哥四年前寫了一個網頁，如上圖效果，實際網址http://pano.z01.com ，話說做好時是正常的，突然某一天，客戶說你這個網站動畫不見了，這是什么原因？
結果檢查腳本一切正常。
其實也不是動畫完全消失，關鍵是要用鼠標點擊一下，才可以播放，否則autoplay效果無用，不能播放。
后來檢查，原來是chrome的腳本機制變更造成的。
在F12調試中，會出出：
HTML5<video>報錯Uncaught (in promise) DOMException
在最新版的Chrome瀏覽器（以及所有以Chromium為內核的瀏覽器）中，已不再允許自動播放音頻和視頻。（Google的某些做法還真是令開發者不爽）。就算你為video或audio標簽設置了autoplay屬性也一樣不能自動播放。
<video src="YOUR_VIDEO_URL" autoplay></video>
如果你用 javascript 代碼顯式調用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只允許用戶對網頁進行主動觸發后才可自動播放音頻和視頻。其實，嚴格地來說，是Chrome不允許在用戶對網頁進行觸發之前播放音頻，而視頻其實是不受限制的。但因為視頻文件同樣包含了音頻，所以也一同被禁止了。Chrome這樣做的目的是為了防止開發者濫用自動播放功能而對用戶產生騷擾。
既然知道了原因，那就開始找解決方法。
比較常規的做法是，為video標簽設置muted屬性，使它靜音，這樣視頻就能自動播放了，但是沒有聲音:
<video src="YOUR_VIDEO_URL" autoplay muted></video>
然后待用戶在網頁上有了任意觸發后，再將muted去掉，或者讓用戶手動去打開音頻（騰訊視頻就是這樣做的）：
document.body.addEventListener('mousedown', function(){
var vdo = $("video")[0]; //jquery
vdo.muted = false;
}, false);
好了，我們來看看大廠的解決方案：
優酷頁面打開后視頻不自動播放，需用戶點擊按鈕才開始播放，B站解決方法和優酷一樣，愛奇藝頁面打開后視頻自動開始播放，但聲音需用戶手工開啟，所以暫時不要去想什么hack的方法了，有辦法這些大廠早用了，還是老老實實引導用戶手工點一下吧。