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

IT技术 javascript google-chrome video html5-video
2021-01-27 18:36:48

我收到错误消息..

Uncaught (in promise) 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>元素？这有什么负面影响吗？

6个回答

要在 chrome 66 更新后自动播放 html 5 元素，您只需将该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 更新试图阻止标签在用户标签上产生随机噪音。这就是静音属性使自动播放再次工作的原因。

我的 <audio> 元素有这个问题，我该如何解决？
2021-03-13 18:36:48
有没有办法在视频开始播放后立即启用音频？删除mute属性或设置volume属性无济于事。
2021-03-27 18:36:48
你也可以muted至少为我写作品。
2021-03-30 18:36:48
我不得不这样做muted="true"，而不是
2021-04-05 18:36:48
最好设置muted=trueORmuted=false
2021-04-06 18:36:48

对我来说（在 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();
}
这是我的问题，在 HTML 中静音完全被忽略，我不得不通过 JS 强制它。经过数天的搜索，+ 1M 给您的答案
2021-03-29 18:36:48
哇，简直不敢相信我真的需要 Angular SSR 加载后视图的 javascript 端静音。一直以来，我都认为 HTML 是问题所在。
2021-03-30 18:36:48
绝对真实且令人难以置信，即使使用最新的 Angular 版本 Ng8。Angular 根本不关心组件的 HTML 模板发生了什么！
2021-03-31 18:36:48
而且，使用新的 Angular 使用方式，@ViewChild()您需要将静态选项设置为 true： @ViewChild('videoPlayer', {static: true}) videoplayer: ElementRef; video: HTMLVideoElement; 然后： this.video = this.videoplayer.nativeElement;@ngOnInit()
2021-04-07 18:36:48

尝试使用 mousemove 事件侦听器

var audio = document.createElement("AUDIO")
document.body.appendChild(audio);
audio.src = "./audio/rain.m4a"

document.body.addEventListener("mousemove", function () {
    audio.play()
})

我发现的最佳解决方案是将视频静音

HTML

<video loop muted autoplay id="videomain">
  <source src="videoname.mp4" type="video/mp4">
</video>

回答手头的问题......
不，拥有这些属性是不够的，为了能够自动播放带有音频的媒体，您需要在文档上注册用户手势。

但是，这个限制非常弱：如果您确实在父文档上收到了这个用户手势，并且您的视频是从 iframe 加载的，那么您可以播放它...

所以以这个小提琴为例，它只是

<video src="myvidwithsound.webm" autoplay=""></video>

在第一次加载时，如果你没有点击任何地方，它就不会运行，因为我们还没有注册任何事件。
但是，一旦您单击“运行”按钮，父文档 (jsfiddle.net) 就会收到用户手势，现在可以播放视频，即使它在技术上已加载到不同的文档中。

但是下面的代码片段，因为它需要您实际单击运行代码片段按钮，所以将自动播放。

<video src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" autoplay=""></video>

这意味着您的广告可能能够播放，因为您确实向主页提供了用户手势。

现在，请注意 Safari 和 Mobile Chrome 具有比这更严格的规则，并且将要求您在用户事件处理程序本身play()的<video>or<audio>元素上以编程方式至少实际触发一次该方法。

Show code snippet

如果您不需要音频，那么只需不要将其附加到您的媒体上，也可以自动播放只有视频轨道的视频，这将减少您用户的带宽使用。

@JanTuroň 不，你不能。.play和.pause方法需要直接从 HTMLMediaElement 实例调用，或者您需要创建方法的绑定副本，例如vid.play.then(vid.pause.bind(vid))，这并不比简单的vid.play.then(()=>vid.pause()).
2021-04-07 18:36:48
其它你可能感兴趣的问题
上一篇使用括号与 javascript 导入语法 下一篇请解释 JavaScript 闭包在循环中的使用