在Chrome浏览器中，HTML5视频自动播放无效。

Question

我正在尝试使用HTML5视频在我的幻灯片中展示视频。使用controls参数（显示控件）可以正常工作。但是当我添加autoplay时，它不会自动播放，所以我搜索了一下发现Chrome只允许静音的视频自动播放。

因此，我添加了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

---

请查看此帖子，他们找到了解决方案。 - Thomas Neveu

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

---

我没有 .ogg 格式的视频，但是最近我发现我以前制作的另一个网站上的自动播放视频也无法自动播放了。难道在 Chrome 上没有自动播放的方法吗？即使将视频静音似乎他们也不允许自动播放，这看起来很奇怪。 - twan

JS部分没有起作用。我看到我的Chrome浏览器已经是最新版本，所以我不知道为什么它不工作。 - twan

我有一个问题，如果自动播放的视频被静音了，那么为什么YouTube视频可以无声播放？请帮忙/解释一下。谢谢。 - Ranjit Kumar

嗨，您只能自动播放已静音的视频。根据 Google 的自动播放政策更改，您不能自动播放带有声音的视频。因此，您必须在视频中包含控件，以便用户想要听视频声音时，可以单击声音按钮。在 Facebook 中，您也不会看到带声音的视频自动播放，有一个选项可以启用声音。Youtube 也是如此。当视频广告弹出时，它会自动静音播放，用户可以决定是否启用声音。对于您的情况，可能是浏览器过旧或已启用了适用于所有内容的声音。 - Shashankk Shekar Chaturvedi

要了解Google的自动播放策略更改的更多信息，请访问以下链接：- https://developers.google.com/web/updates/2017/09/autoplay-policy-changes - Shashankk Shekar Chaturvedi

Answer 2

因为我遇到了相同的问题（在Chrome中无法自动播放mp4，而在Firefox和Safari中可以），所以最初的回答解决了我的问题：

$('#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

---

如果它被静音了，我不知道为什么根据他们的政策之前它没有加载... - MrMesees

Answer 3

你应该使用 autoPlay 而不是 autoplay。

使用以下代码：

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

- Kalebe Samuel

Answer 4

我有一种方法可以在Chrome上实现视频自动播放而不静音。 这种方法分为两步。 第一步：使用JavaScript提取视频文件的音频(从视频文件中提取音频); 第二步：使用AudioContext Api播放从视频文件中提取的音频，并在静音状态下播放视频；

- 惠下柳下柳