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

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

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

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

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

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

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

来消除错误。

我得到了这个错误

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

来源:自动播放策略