我正在得到错误信息..

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>元素一样简单吗?这有什么负面影响吗?


当前回答

我在尝试播放音频文件时遇到了类似的错误。起初,它是工作的,然后它停止工作时,我开始使用ChangeDetector的markForCheck方法在同一函数中触发重新呈现时,承诺解决(我有一个视图呈现的问题)。

当我改变了markForCheck detectChanges它又开始工作了。我真的无法解释发生了什么,我只是想把这个放在这里,也许它会帮助到某人。

其他回答

在chrome 66更新后,要使html 5元素自动播放,您只需要将静音属性添加到视频元素。

现在的视频HTML

<视频 title =“广告” webkit-playsinline = " true " playsinline = " true " Style ="background-color: rgb(0,0,0); "位置:绝对的;宽度:640 px;身高:360 px;“ src = " http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4 " 视频播放= " " > < / >

只需要静音="静音"

<视频 title =“广告” Style ="background-color: rgb(0,0,0); "位置:绝对的;宽度:640 px;身高:360 px;“ src = " http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4 " 播放= " true " 沉默= "低调" > < /视频>

我相信chrome 66的更新是为了阻止标签在用户标签上产生随机噪音。这就是为什么静音属性使自动播放再次工作。

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

但是,这个限制是非常弱的:如果你确实在父文档上接收到这个user-gesture,并且你的视频是从iframe加载的,那么你可以播放它…

以这把小提琴为例,它只是

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

在第一次加载时,如果你没有点击任何地方,它将不会运行,因为我们还没有注册任何事件。 但是,一旦单击“Run”按钮,父文档(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有比这更严格的规则,并要求您至少在用户事件处理程序本身的<video>或<audio>元素上以编程方式触发一次play()方法。

btn。Onclick = e => { //将MediaElement标记为用户批准的 vid.play () () = > vid.pause ()); //现在我们可以在任何时候用这个MediaElement做任何我们想做的事情 setTimeout(()=> vid.play(), 3000); }; <button id="btn">play in 3s</button> <视频 src = " https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm " id = "视频" > < /视频>

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

在我的情况下,它只是一个点击声音,在开始时自动调用(我不介意它是否静音)。所以我用:

const clickSound = new Audio('click.wav');
clickSound.play().catch(function (error) {
    console.log("Chrome cannot play sound without user interaction first")});

来消除错误。

音频自动播放属性无法在MS Edge中工作

就我而言,我必须这么做

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