如何处理“未捕获（承诺中）DOMException：play（）失败，因为用户没有首先与文档交互”在Chrome 66的桌面上？

javascript google-chrome video html5-video

2022-08-30 00:49:32

我收到错误消息。.

未捕获（承诺中）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=""<video>

答案 1

要使 html 5 元素上的自动播放在 chrome 66 更新后工作，您只需将属性添加到视频元素即可。muted

所以你当前的视频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更新正试图阻止标签在用户标签上产生随机噪音。这就是静音属性使自动播放再次工作的原因。

答案 2

对我来说（在Angular项目中），这段代码帮助了我：

在 HTML 中，您应该添加autoplay muted

在 JS/TS 中

playVideo() {
    const media = this.videoplayer.nativeElement;
    media.muted = true; // without this line it's not working although I have "muted" in HTML
    media.play();
}