移除静音标签后，html 页面中的视频不会自动播放

Question

我有一个 html 页面，我在其中使用了视频标签：

<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
           <source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>

问题是，当我删除 muted="muted" 属性时，即：

<video playsinline="playsinline" autoplay="autoplay" loop="loop">
           <source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>

视频自动播放停止。我该如何解决这个问题？

我尝试使用 javascript 播放视频，但它导致 DOM Promise 异常。

Answer 1

在 Google Chrome 中，除非用户先单击某些内容，否则播放声音的任何内容都将不起作用。见公告here.
解决方案可能是使用 JavaScript 来模拟点击。

document.addEventListener('click', musicPlay);
function musicPlay() {
    document.getElementById('ID').play();
    document.removeEventListener('click', musicPlay);
}

如果您无法使用 JavaScript，Google 的解决方案是添加

<head>
<script>
window.onload = function() {
  var context = new AudioContext();
}
</script>
</head>

如果仍然无效，请查看 here.

推荐的更多最佳实践 Google

移除静音标签后，html 页面中的视频不会自动播放

video not auto playing in html page when muted tag is removed

html

google-chrome

html5-video