我正在得到错误信息..

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


当前回答

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

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

其他回答

我得到了这个错误

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

来源:自动播放策略

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

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

来消除错误。

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

HTML

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

我改变了我的UI,让用户按下一个按钮来加载网站(当他们点击按钮后,网站加载时,音频播放)

因为他们与DOM交互,然后音频播放!!

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