HTML5 背景视频无法播放答案

【问题标题】：HTML5 background video will not playHTML5 背景视频无法播放
【发布时间】：2018-10-04 13:00:50
【问题描述】：

我遇到了 HTML5 背景视频的问题。视频位于首页，应无声自动启动。单击按钮后，它应该以 20% 的音量播放。我的代码在 Mozilla Firefox 中运行没有任何问题。但不是在 Safari 或 MS Edge 中。仅在谷歌浏览器中有条件。当我进入页面时，视频不启动，当我切换到另一个站点并返回主页时，视频可以工作。

我已经删除了该卷的 JS 代码并仅使用 .mp4-video 进行了测试。没有成功。

HTML：

<div id="video">
    <video loop="true" preload="none" autoplay="true">
        <source src=".../video.mp4" type="video/mp4">
        <source src=".../video.webm" type="video/webm">
    </video>
</div>

JS：

video_show();
function video_show() {
  $("#video video").each(function(){this.volume = 0.0;});
};
$("button1").click(function() {
  $("#video video").each(function(){this.volume = 0.2;});
});
$("button2").click(function() {
  $("#video video").each(function(){this.volume = 0.0;});
});

CSS：

#video video {
  height: auto;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  position: fixed;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: auto;
  z-index: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}

【问题讨论】：

IIRC 你还需要muted 属性来自动播放视频而无需用户交互
这就是我在 MS Edge 和 Google Chrome 中的问题的解决方案。它也适用于$("#video video").each(function(){this.muted = true;}); 我读到Safari 需要autoplay 的controls 属性。但这并不能解决我的问题 - 有什么想法吗？
哪个版本的 Safari？ FWIW 这在 Safari 12.0 中对我来说很好用：<video muted autoplay> <source src="trailer.mp4" type="video/mp4"> </video>
它有效。谢谢！

标签： javascript google-chrome safari html5-video microsoft-edge

【解决方案1】：

以下是在 Edge 和 Firefox 中按预期运行的更新代码。

<!DOCTYPE html>
<head>
<style>
#video video {
 
  height: 200px;
  width: 200px;
 
 
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

function video_show() {
  $("#video video").each(function(){this.volume = 0.0;});

};

function play_sound() {
  $("#video video").each(function(){this.volume = 0.2;});

};
function mute_sound() {
  $("#video video").each(function(){this.volume = 0.0;});

};


</script>
</head>
<body onload="video_show()">
<input type="button" id="button1" value="Play Sound" onclick="play_sound()"/>
<input type="button" id="button2" value="Mute Sound" onclick="mute_sound()"/>
<div id="video">
    <video loop="true"  autoplay>
       <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
    </video>
</div>
</body>
</html>

此外，您可以尝试根据您的要求修改代码。

注意：- 在本地进行测试。 Stack Overflow 输出无法正常播放视频。

【讨论】：

另一种视频格式不能解决我在 Safari 中的问题。谷歌浏览器需要muted 属性autoplay。