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 Exception。

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>

如果仍然无法使用，有关Google建议的更多最佳做法，请查看here。

删除静音标签后，视频无法在html页面中自动播放

1 个答案: