如何处理“未捕获（承诺）的DOMException：play（）失败，因为用户没有首先与文档进行交互。” 在装有Chrome 66的台式机上？

我收到错误消息。

未捕获（承诺）的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>元素？这有负面影响吗？

要在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更新试图阻止标签页在用户标签上创建随机噪音。这就是为什么静音属性使自动播放再次起作用的原因。

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

的HTML

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

1. 打开 chrome://settings/content/sound
2. 设置无需用户手势
3. 重新启动Chrome

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

但是，此限制非常弱：如果您确实在父文档上收到了该用户手势，并且您的视频是从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>或<audio>元素上以编程方式实际触发至少一次方法。

btn.onclick = e => {
  // mark our MediaElement as user-approved
  vid.play().then(()=>vid.pause());
  // now we can do whatever we want at any time with this MediaElement
  setTimeout(()=> vid.play(), 3000);
};

<button id="btn">play in 3s</button>
<video
  src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" id="vid"></video>

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

对于我（在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();
}

尝试使用mousemove事件lisentner

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

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

扩展DOM元素，处理错误并优雅地降级

在下面，我使用原型函数包装本地DOM播放函数，抓住其诺言，然后在浏览器抛出异常时降级为播放按钮。该扩展解决了浏览器的缺点，并且在知道目标元素的情况下可以在任何页面中即插即用。

// JavaScript
// Wrap the native DOM audio element play function and handle any autoplay errors
Audio.prototype.play = (function(play) {
return function () {
  var audio = this,
      args = arguments,
      promise = play.apply(audio, args);
  if (promise !== undefined) {
    promise.catch(_ => {
      // Autoplay was prevented. This is optional, but add a button to start playing.
      var el = document.createElement("button");
      el.innerHTML = "Play";
      el.addEventListener("click", function(){play.apply(audio, args);});
      this.parentNode.insertBefore(el, this.nextSibling)
    });
  }
};
})(Audio.prototype.play);

// Try automatically playing our audio via script. This would normally trigger and error.
document.getElementById('MyAudioElement').play()

<!-- HTML -->
<audio id="MyAudioElement" autoplay>
  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

就我而言，我必须这样做

 // Initialization in the dom
 // Consider the muted attribute
 <audio id="notification" src="path/to/sound.mp3" muted></audio>


 // in the js code unmute the audio once the event happened
 document.getElementById('notification').muted = false;
 document.getElementById('notification').play();

Chrome需要用户互动，视频才能通过js（video.play（））自动播放或播放。但是，互动可以随时随地进行。如果您仅在页面上单击随机，视频将自动播放。然后我解决了，添加了一个按钮（仅在Chrome浏览器上），该按钮显示“启用视频自动播放”。该按钮不执行任何操作，仅单击它便是任何其他视频所需的用户交互。

尝试播放音频文件时遇到类似的错误。最初，它正在工作，然后当我开始markForCheck在同一函数中使用ChangeDetector的方法以在承诺解决后触发重新渲染时停止工作（我对视图渲染存在问题）。

当我更改为时markForCheck，detectChanges它又开始工作了。我真的无法解释发生了什么，我只是想把它放到这里，也许会有所帮助。

您应该muted在videoElement代码内部按预期方式添加属性。看下面..

<video id="IPcamerastream" muted="muted" autoplay src="videoplayback%20(1).mp4" width="960" height="540"></video>

别忘了添加有效的视频链接作为源

我在Android手机上玩时遇到一些问题。经过几次尝试，我发现打开Data Saver时不会自动播放：

如果启用了数据保护程序模式，则不会自动播放。如果启用了数据保护程序模式，则在媒体设置中将禁用自动播放。

资源

键入的Chrome：//标志在地址栏

搜索：自动播放

自动播放政策

决定是否允许音频或视频自动播放时使用的策略。

– Mac，Windows，Linux，Chrome OS，Android

将此设置为“ 不需要用户手势 ”

重新启动Chrome，您无需更改任何代码