我正在得到错误信息..

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


当前回答

根据新的浏览器策略,在播放Audio元素之前,用户必须首先与DOM交互。

如果你想在页面加载中播放媒体,那么你可以简单地添加自动播放属性到HTML中的音频元素,就像这样

<video id="video" src="./music.mp4" autoplay> .

或者如果你不想做自动播放,那么你可以使用Javascript处理这个。由于autoplay属性设置为true,媒体将被播放,我们可以简单地静音媒体。

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

小鬼:现在不管你什么时候播放媒体,别忘了把静音属性设为false。像这样

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

或者,您还可以显示一个简单的弹出窗口,用户将单击模式中的允许按钮。因此,他首先与DOM交互,然后您不需要做任何事情

其他回答

我发现最好的解决办法就是把视频静音

HTML

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

我在Android手机上玩游戏时遇到了一些问题。 经过几次尝试,我发现当数据保护程序是没有自动播放:

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

在地址栏中输入Chrome://标志

搜索:播放

播放政策 决定是否允许音频或视频时使用的策略 播放。 - Mac, Windows, Linux, Chrome OS, Android

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

重新启动Chrome浏览器,你不需要改变任何代码

就我而言,我必须这么做

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

对我来说(在Angular项目中),这段代码有帮助:

在HTML中,您应该添加自动播放静音

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