时间戳

首页 > 解决方案 > 视频无法使用声音 HTML 自动播放

html - 视频无法使用声音 HTML 自动播放

问题描述

我的网站有一个视频，但在我刷新页面之前它不会自动播放

尝试更改代码，但仅在音频静音时才有效。当有音频时，它不会自动播放，我必须刷新页面

<div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
        <video  autoplay loop muted width="1900"> 
            <source src="images/video/ad.mp4" type="video/mp4" />  <!-- Declaring it is a video and from where the file should be played from -->
        </video>
    </div>
</div>

我希望它在我打开带有音频的页面时自动播放，而不是刷新页面以使其播放音频。

标签： htmltwitter-bootstrap

解决方案

这来自 Google 的自动播放政策更改：

Chrome 的自动播放策略很简单：

  • 始终允许静音自动播放。
  • 在以下情况下允许自动播放声音：
    • 用户与域进行了交互（单击、点击等）。
    • 在桌面上，用户的媒体参与指数阈值已被超过，这意味着用户之前播放过有声视频。
    • 在移动设备上，用户已[将网站添加到他们的主屏幕]。
  • 顶级框架可以将自动播放权限委托给其 iframe 以允许自动播放声音。

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

我认为让用户点击将是取消静音广告的最佳解决方案。以下是使用股票视频的示例。您的代码是相同的，只是更改了视频 url，并在视频下方添加了一个基本按钮。

unmuteButton.addEventListener('click', function() {
  video.muted = false;
});
<div class="carousel-inner" role="listbox">
  <div class="carousel-item active">
    <video muted autoplay loop width="1900" id="video"> 
        <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />  <!-- Declaring it is a video and from where the file should be played from -->
      </video>
    <button id="unmuteButton">Unmute</button>
  </div>
</div>

推荐阅读