我正在得到错误信息..

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


当前回答

我得到了这个错误

DOMException: play()失败,因为用户没有首先与文档交互。

下面是我在Angular项目中所做的

关键点:永远不要假设视频会播放,当视频没有真正播放时,不要显示暂停按钮。

你应该总是查看play函数返回的Promise,看看它是否被拒绝了:

ngOnInit(): void{
    this.ensureVideoPlays();
}

private ensureVideoPlays(): void{
    const video = document.querySelector("video");

    if(!video) return;
    
    const promise = video.play();
    if(promise !== undefined){
        promise.then(() => {
            // Autoplay started
        }).catch(error => {
            // Autoplay was prevented.
            video.muted = true;
            video.play();
        });
    }
}

来源:自动播放策略

其他回答

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

但是,这个限制是非常弱的:如果你确实在父文档上接收到这个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 = "视频" > < /视频>

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

您应该在videoElement中添加静音属性,以使代码正常工作。看下面..

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

不要忘记添加一个有效的视频链接作为源

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

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

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

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