获取原生 html 视频以在 chrome 上自动播放

Question

在我们的网站 coverr.co 中，我们提供免费的股票视频供任何商业用途。

Coverr 中最酷的功能之一是允许我们的用户将视频运行视为我们网站的背景视频。例如：https://coverr.co/videos/Beach

如果您使用 FF 或 Safari 访问此页面，视频将自动播放，没问题。然而，自 2018 年 4 月 Chrome's latest policy change 以来，Chrome 上的自动播放一直不稳定。

我们按照新规范的要求添加了 "autoplay" 和 "muted" 标志（尽管我们所有的视频片段都是无声的），但没有成功。它有时会播放，有时只是保持静止状态，直到用户主动开始播放。

有人可以帮我们解开这个谜团吗？提前致谢！

Answer 1

找到问题了，跟我们用的angular2.

有关

显然 Angular 2 无法正确添加 muted 元标记。完整答案，但基本上你需要使用 Angular 的 onloadedmetadata 属性：

onloadedmetadata="this.muted = true"

一般来说，它应该是这样的：

<video onloadedmetadata="this.muted=true" autoplay>
  <source src="myVideo.mp4" type="video/mp4" />
</video>

重要评论：

我们还添加了 oncanplay="this.play()" 以提高播放稳定性。所以将来我们可以处理 play() promise 并在自动播放被其他原因拒绝时显示播放按钮

补充重要评论：

根据 @VC.One 的问题，只是想澄清一下，有一种方法可以验证或至少得到播放通知（摘自我的文章问题):

var promise = document.querySelector('video').play();
if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

但它不能确保视频 实际上 播放，因此即使一切正常，您也可能会收到错误消息。当然，添加播放按钮也可以，但它确实会影响我们正在尝试做的事情 "sting" - 在网站背景中自动播放静音视频。

基本上所有你需要它来正确注入自动播放和静音，显然在 Angular 2 这不是一个简单的任务......

Answer 2

(1) 无法重现您的问题（在 Chrome 版本 69.0.3497.100 上）：

这会正确地自动播放和循环播放：

<!DOCTYPE html>
<html>
<body>

<video width="100%"  autoplay loop>
<source src="https://storage.googleapis.com/coverr-main/mp4/Beach.mp4" type="video/mp4">
</video>

</body>
</html>

(2) 您的 cover/poster 图片挡住了视频（可能在下面播放）。

尝试删除封面图片。您的冻结帧（未播放）实际上是海报图像。通过删除封面图像代码进行测试（例如： <div class="poster hidden"> 和相关）。

PS: 如果右击海报图片选择"show controls"，显示的"play"按钮将开始播放。

获取原生 html 视频以在 chrome 上自动播放

Get native html videos to autoplay on chrome

html

video

google-chrome

html5-video