當我們打開一些視頻網站的時候，我們發現視頻可以自動播放，但是到了我們自己的網站後即使加上 autoplay 或者用 js 方法控制，也是不能自動播放的
<body>
<video src="1.mp4" autoplay></video>
</body>
<script>
const vd = document.querySelector('video')
vd.play()
</script>
打開控制台，會發現報錯了
說是用戶還沒有與頁面交互，所以這個方法失敗了
這是因為 chrome 瀏覽器的自動播放策略，其它播放器也大差不差
主要目的是為了改善用戶體驗
要不然你在人多的地方打開一個網站，網站突然發出奇怪的聲音，豈不是當場社死
那麼解決辦法有哪些
自動播放策略裡也說明了
- 允許無聲自動播放
- iframe
- 滿足下面三種條件的任意一種
- 用戶在當前域進行了交互
- 用戶已經將網站添加到移動端主屏幕或桌面上安裝了 pwa
- 在桌面設備上，用戶的媒體參與度超過閾值
這個媒體參與度是什麼呢
這個值越高，瀏覽器就會認為你對這個網站的內容更感興趣，當達到一定值後，就會允許自動播放視頻
chrome 瀏覽器可以打開chrome://media-engagement/來查看
左邊是訪問的域名，右邊是參與度的值，數值越高，越有可能自動播放
可是我們的網站沒有那麼高的值，那麼我們怎麼實現自動播放呢
- iframe 是父窗口有自動播放的能力了可以傳遞給子窗口，這個肯定不合適
- 用戶剛打開網站，怎麼可能已經交互過呢
- 移動端添加到主屏幕或者桌面安裝 pwa，這個國內基本沒有
那麼只剩下兩種方式 - 靜音播放，讓用戶手動打開音量
- 檢測到不能自動播放，讓用戶點擊播放
我們看看視頻網站都是怎麼做的
我哔哩哔哩值太高，所以換了個電腦來截圖展示
哔哩哔哩是靜音播放
快手是靜音播放
抖音是讓用戶點擊播放
好，方法說到這裡，哪種方式自己選擇