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

【问题标题】：Get native html videos to autoplay on chrome获取原生 html 视频以在 chrome 上自动播放
【发布时间】：2019-03-17 01:31:33
【问题描述】：

在我们的网站coverr.co 上，我们提供免费的库存视频供任何商业用途。

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

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

根据新规范的要求，我们添加了“自动播放”和“静音”标志（尽管我们所有的视频片段都是无声的），但没有成功。它有时会播放，有时会一直冻结，直到用户主动开始播放。

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

【问题讨论】：

有没有办法通过Javascript触发播放（eg:当页面加载“完成”事件时，现在找到<video>元素并给它一个“.play”命令)?
所以，有： var promise = document.querySelector('video').play(); if (promise !== undefined) { promise.then(_ => { // 自动播放开始！}).catch(error => { // 自动播放被阻止。 // 显示一个“播放”按钮，以便用户可以开始回放。 }）; } 但它不能确保视频播放，即使一切都是合法的，你也可能会得到错误..

标签： html google-chrome video html5-video

【解决方案1】：

发现了问题，这与我们使用 angular 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 中这不是一个简单的任务......

【讨论】：

【解决方案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：如果你右键点击海报图片并选择“显示控件”，显示的“播放”按钮将开始播放。

【讨论】：