Javascript 如何处理；未捕获（承诺中）DomeException:play（）失败，因为用户没有'；不要先与文档交互。”；在桌面上使用Chrome 66？

我收到了错误信息

未捕获（承诺中）DomeException: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=“”

属性添加到

元素一样简单吗？这有什么负面影响吗？

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

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

举个例子，这只是

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

在第一次加载时，如果您没有单击任何位置，它将不会运行，因为我们尚未注册任何事件。
但是，一旦单击“运行”按钮，那么父文档（jsfiddle.net）确实会收到一个用户手势，现在视频会播放，尽管从技术上讲，它是加载到另一个文档中的

但是下面的代码段将自动播放，因为它要求您实际单击“运行代码段”按钮

在地址栏中键入

搜索：自动播放

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

–Mac、Windows、Linux、Chrome操作系统、Android

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

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

打开

chrome://settings/content/sound

设置无需用户手势

重新启动铬

---

要在chrome 66更新后使html 5元素上的自动播放正常工作，只需将

muted

属性添加到视频元素中

所以你现在的视频是HTML

---

我找到的最佳解决方案是使视频静音

HTML

---

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

如果启用模式，则不会自动播放。如果启用了数据保存模式，则在“媒体设置”中禁用自动播放

---

尝试使用mousemove事件lisentner

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

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

---

Chrome需要用户交互才能自动播放或通过js（video.play（））播放视频。 但这种互动可以是任何形式的，在任何时刻。 如果您只需单击页面上的“随机”，视频将自动播放。 于是我决定，添加一个按钮（仅在chrome浏览器上），上面写着“启用视频自动播放”。按钮不起任何作用，只是单击它，这是任何后续视频所需的用户交互。

对于我（在Angular project中），此代码有助于：

在HTML中，您应该添加

autoplay mute

在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();
}

---

我在尝试播放音频文件时遇到了类似的错误。起初，它是工作的，然后当我开始在同一个函数中使用ChangeDetector的

markForCheck

方法在承诺解决时触发重新渲染时，它停止了工作（我在视图渲染方面遇到了问题）

---

当我将

markForCheck

更改为

detectChanges

时，它又开始工作了。我真的无法解释发生了什么，我只是想把这个放在这里，也许它会帮助一些人。

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

下面我使用prototype函数包装本机DOM play函数，抓住它的承诺，然后在浏览器抛出异常时降级为播放按钮。此扩展解决了浏览器的缺点，并且在了解目标元素的任何页面中都是即插即用的

//JavaScript
//包装本机DOM audio元素播放函数并处理任何自动播放错误
Audio.prototype.play=（函数（播放）{
返回函数（）{
var audio=这个，
args=参数，
承诺=播放。应用（音频，args）；
如果（承诺！==未定义）{
承诺。捕获（=>{
//已阻止自动播放。这是可选的，但添加一个按钮以开始播放。
var el=document.createElement（“按钮”）；
el.innerHTML=“播放”；
el.addEventListener（“单击”，函数（）{play.apply（音频，参数）；}）；
this.parentNode.insertBefore（el，this.nextSibling）
});
}
};
})（音频。原型。播放）；
//尝试通过脚本自动播放我们的音频。这通常会触发错误。
document.getElementById（'MyAudioElement'）.play（）
您的浏览器不支持音频元素。

您应该在

视频元素

中添加

静音

属性，以便按预期进行代码工作。看下面

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

---

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

在我的情况下，我必须这样做

 // 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();

//在dom中初始化
/考虑静音属性
//在js代码中，一旦事件发生，取消静音音频
document.getElementById（'notification'）.mute=false；
document.getElementById（'notification'）.play（）；

根据新的浏览器策略，在播放音频元素之前，用户必须先与DOM交互

如果您想在页面加载时播放媒体，那么您可以像下面这样简单地向HTML中的audio元素添加autoplay属性

或者，如果您不想进行自动播放，则可以使用Javascript处理此问题。由于autoplay属性设置为true，将播放媒体，我们可以简单地将媒体静音

document.getElementById('video').autoplay = true;
document.getElementById('video').muted = true; 

小鬼：现在什么时候

 // 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();

document.getElementById('video').autoplay = true;
document.getElementById('video').muted = true; 

document.getElementById('video').muted = false; 
document.getElementById('video').play();