如何處理「未捕獲（承諾中）DOMException：play() 失敗，因為使用者沒有先與文件互動。」在使用 Chrome 66 的桌面上？

Question

我收到錯誤訊息..

未捕獲（承諾中）DOMException：play() 失敗，因為使用者沒有先與文件互動。

..嘗試使用 Chrome 版本 66 在桌面上播放影片時。

我確實發現一個廣告在網站上自動開始播放，但使用以下 HTML：

<video
    title="Advertisement"
    webkit-playsinline="true"
    playsinline="true"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.mp4"
    autoplay=""></video>

繞過Chrome v66 的自動播放攔截器真的很簡單，只需添加webkit-playsinline="true"、playsinline="true" 和 元素的>autoplay="" 屬性？這會帶來什麼負面影響嗎？

Answer 1

要在 chrome 66 更新後讓 html 5 元素自動播放，您只需將 muted 屬性新增至 video 元素即可。

所以你目前的影片 HTML

<video
    title="Advertisement"
    webkit-playsinline="true"
    playsinline="true"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    autoplay=""></video>

只需要muted="muted"

<video
    title="Advertisement"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    autoplay="true"
    muted="muted"></video>

我相信 chrome 66 更新正在嘗試阻止選項卡在用戶選項卡上產生隨機噪音。這就是為什麼靜音屬性使自動播放再次起作用的原因。