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

Question

我正在尝试使用 html5 视频在我的 slider 中显示视频。这适用于 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 中运行良好。

Answer 1

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

• 用户与域进行了交互(点击、点按等)。
• 在桌面设备上，用户的媒体参与指数阈值已达到交叉，表示用户之前播放过有声视频。
• 在移动设备上，用户已[将网站添加到他们的主屏幕]。

顶级框架可以将自动播放权限委托(delegate)给其 iframe，以允许自动播放声音。

另外，在您的 <source> 后面加上以下标签标签:-

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

看看，如果它现在工作。

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