如何处理'未捕获（承诺中）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 更新正在尝试阻止选项卡在用户选项卡上产生随机噪音。这就是为什么静音属性使自动播放再次起作用的原因。