我正在得到错误信息..

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元素自动播放,您只需要将静音属性添加到视频元素。

现在的视频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的更新是为了阻止标签在用户标签上产生随机噪音。这就是为什么静音属性使自动播放再次工作。

其他回答

Chrome需要一个用户交互视频自动播放或通过js (video.play())播放。 但这种互动可以是任何形式的,在任何时刻。 如果你只是在页面上随机点击,视频将自动播放。 然后我解决了这个问题,添加了一个按钮(只在chrome浏览器上),说“启用视频自动播放”。该按钮不做任何事情,只是单击它,是任何进一步视频所需的用户交互。

尝试使用鼠标移动事件监听器

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

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

根据新的浏览器策略,在播放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交互,然后您不需要做任何事情

在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的更新是为了阻止标签在用户标签上产生随机噪音。这就是为什么静音属性使自动播放再次工作。

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

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