在我们的网站上 coverr.co 我们为任何商业用途提供免费的库存视频。
Coverr 中最酷的事情之一是允许我们的用户在我们的网站上看到作为背景视频运行的视频。例如：https://coverr.co/videos/Beach
如果您使用 FF 或 Safari 访问此页面，视频将自动播放，没问题。不过，自 Chrome 于 2018 年 4 月发布最新政策变更以来，Chrome 上的自动播放功能一直不一致。
我们按照新规范的要求添加了"自动播放"和"静音"标志(尽管我们所有的视频片段都是无声的(，但没有运气。它有时会播放，有时只是保持冻结状态，直到用户主动开始播放。
有人可以帮我们解开这个谜团吗？ 提前感谢！
(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：如果您右键单击海报图像并选择"显示控件"，则显示的"播放"按钮将开始播放。
发现了问题，这与我们使用 angular 2 的事实有关。
显然，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(( 承诺并显示播放按钮，如果自动播放被其他原因拒绝
其他重要评论：
在@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 中这不是一项微不足道的任务......