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

搜索:播放

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

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

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

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

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

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

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

扩展DOM元素，处理错误，优雅地降级

下面我使用原型函数来包装原生DOM播放函数，获取它的承诺，然后在浏览器抛出异常时将其降级为播放按钮。这个扩展解决了浏览器的缺点，是即插即用的任何页面与目标元素的知识(s)。

// JavaScript
// Wrap the native DOM audio element play function and handle any autoplay errors
Audio.prototype.play = (function(play) {
return function () {
  var audio = this,
      args = arguments,
      promise = play.apply(audio, args);
  if (promise !== undefined) {
    promise.catch(_ => {
      // Autoplay was prevented. This is optional, but add a button to start playing.
      var el = document.createElement("button");
      el.innerHTML = "Play";
      el.addEventListener("click", function(){play.apply(audio, args);});
      this.parentNode.insertBefore(el, this.nextSibling)
    });
  }
};
})(Audio.prototype.play);

// Try automatically playing our audio via script. This would normally trigger and error.
document.getElementById('MyAudioElement').play()

<!-- HTML -->
<audio id="MyAudioElement" autoplay>
  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

我得到了这个错误

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

来源:自动播放策略

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

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

源