Question

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

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

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

我们已按照新规范的要求添加了“自动播放”和“静音”标志（尽管我们的所有视频片段都没有声音），但是没有运气。它有时会播放，有时会保持冻结状态，直到用户主动开始播放为止。

有人可以帮助我们解决这个难题吗？提前致谢！

Answer 1

发现了问题，这与我们使用角度2的事实有关。

显然，Angular 2在正确添加muted元标记时遇到了问题。完整答案can be found here，但基本上您需要使用Angular的onloadedmetadata属性：

onloadedmetadata="this.muted = true"

通常，它应该是这样的：

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

重要评论：

我们还添加了oncanplay="this.play()"，以提高播放的鲁棒性。因此，将来如果自动播放由于其他原因而被拒绝，我们可以处理play（）承诺并显示播放按钮

其他重要评论：

在@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.
  });
}

但是它不能确保视频实际上能够播放，因此即使一切合法，您也可能会出错。当然，添加播放按钮也可以，但是确实消除了我们正在尝试做的“刺痛”操作-在网站的背景中自动播放静音的视频。

基本上，您需要它来正确注入自动播放和静音功能，而且显然在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）您的封面/海报图像屏蔽了视频（可能在下面播放）。

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

PS：如果右键单击海报图像并选择“显示控件”，则显示的“播放”按钮将开始播放。

获取原生HTML视频以在Chrome浏览器上自动播放

2 个答案: