Question

我正在尝试使用html5视频在滑块中显示视频。使用controls参数（显示控件）可以很好地工作。但是，当我添加autoplay时，它不会自动播放，因此我搜索了可能的原因，发现选择框仅允许静音视频自动播放。

因此我向其中添加了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中自动播放。在以下情况下，可以自动播放声音：

用户已与域互动（单击，点击等）。
在台式机上，用户的“媒体参与度索引”阈值为交叉，表示用户以前曾播放带声音的视频。
在移动设备上，用户已[将网站添加到主屏幕中。]

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

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

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

看，如果现在可以使用。

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

Answer 2

在这里结束是因为我遇到了同样的问题（尽管Chrome浏览器无法在Firefox和Safari中运行mp4，但无法自动播放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 3

我拥有一种使视频自动播放而又不会在Chrome上静音的方法。此方法有两个步骤。第一步：使用javascript（Extracting audio from a video file）提取视频文件的音频；第二步：使用AudioContext Api播放音频（从视频文件中提取），并在静音状态下播放视频；

Answer 4

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

使用此代码：

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

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

4 个答案: