HTML5 视频自动播放在 Chrome 中不起作用

Question

我正在尝试使用 html5 视频在我的滑块中显示视频。这适用于 controls 参数（显示控件）。但是当我添加 autoplay 它不会自动播放所以我搜索了为什么会这样，发现 chome 只允许静音视频自动播放。

所以我向它添加了 muted 参数，但是当我这样做时，我的整个视频变黑并且仍然没有自动播放。

为什么会这样？

我的代码：

 <div class="r-slider-item">
    <video width="100%" height="100%" autoplay muted loop>
      <source src="assets/watertuin.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div class="container">
      <div class="r-slider-top-content">
        <h1 class="animated fadeInDown">RESERVEER <span>NU</span></h1>
        <a href="#" class="btn btn-outlined animated fadeInUp"> Reserveren </a>
      </div>
    </div>
</div>

在 Firefox 和 IE 11 中它工作得很好。

原文由 twan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据 Google 的最新政策，静音视频可以在 Chrome 中自动播放。在以下情况下允许自动播放声音：

• 用户已与域进行交互（单击、点击等）。
• 在台式机上，已超过用户的媒体参与指数阈值，这意味着用户之前播放过有声视频。
• 在移动设备上，用户已 [将网站添加到他们的主屏幕]。

顶级框架可以将自动播放权限委托给它们的 iframe，以允许自动播放声音。

另外，将以下标签放在 <source> 标签之后：-

 <source src="assets/watertuin.ogg" type="video/ogg">

看看，如果它现在有效。

在以下位置查看有关 Google 自动播放政策更改的更多信息：- https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

原文由 Shashankk Shekar Chaturvedi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在这里结束是因为我遇到了同样的问题（尽管它在 Firefox 和 Safari 中工作，但在 Chrome 中没有 mp4 自动播放）。这就是为我修复的：

 $('#video')[0].load();

希望这可以帮助其他人。我的 HTML：

 <video id="video" class="video" autoplay muted loop>
   <source id="video-src" src="img/video.mp4" type="video/mp4">
</video>

原文由 Sean Doherty 发布，翻译遵循 CC BY-SA 4.0 许可协议