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

Posted 2023-03-05

【中文标题】HTML5 视频自动播放在 chrome 中不起作用

【英文标题】：HTML5 video autoplay not working in chrome

【发布时间】：2019-03-20 16:19:14

【问题描述】：

我正在尝试使用 html5 视频在我的滑块中显示视频。这适用于 controls 参数（显示控件）。但是当我添加 autoplay 时，它不会自动播放，所以我搜索了为什么会这样，发现 chome 只允许静音视频自动播放。

所以我向它添加了muted 参数，但是当我这样做时，我的整个视频变黑并且仍然没有自动播放。

为什么会这样？

我的代码：

<div class="r-slider-item">
    <video   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 中运行良好。

【问题讨论】：

看到这个Post他们找到了解决方案

【参考方案1】：

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

使用此代码：

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

【参考方案2】：

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

【参考方案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>

【讨论】：

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

【参考方案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

【讨论】：

我没有我的视频的 .ogg 版本，但现在我看到了我不久前创建的另一个网站，该网站曾经使用自动播放视频也停止了自动播放。没有办法在chrome上自动播放吗？看起来很奇怪，即使视频被静音，他们也不允许这样做。

您的代码应该可以工作。尝试在 JavaScript 中添加它：-

JS 部分没有帮助。我看到我的 Chrome 是最新的，所以我不知道它为什么不工作。

为了在 Chrome 中播放，我认为文件必须是 H.264 或 WebM。检查此链接：-developer.mozilla.org/en-US/docs/Web/HTML/…。试试看是否可行

我再次尝试了javascript部分，发现我没有将id vid添加到我的视频标签中，现在它可以工作了！谢谢。