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 中运行良好。

Answer 1

您应该使用自动播放而不是自动播放。

使用此代码：

<video class="z-depth-1" autoPlay loop controls muted>
    <source src={YOUR_VIDEO_SOURCE} type="video/mp4" />
</video>

Answer 2

我有一种方法可以在 Chrome 上自动播放视频而无需静音。 该方法有两个步骤。 第一步：使用javascript(Extracting audio from a video file)为视频文件提取音频； 第二步：使用AudioContext Api播放音频（提取视频文件），静音播放视频；

Answer 3

在这里结束是因为我遇到了同样的问题（尽管它在 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>

Answer 4

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

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

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

另外，在您的<source> 标签之后添加以下标签：-

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

看看，如果它现在工作。

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