Question

我对HTML5背景视频有疑问。视频在首页上，应自动开始播放，且无声音。单击按钮后，它应以20％的音量播放。我的代码可以在Mozilla Firefox中正常运行。但不是在Safari或MS Edge中。仅在Google Chrome中有条件地使用。当我进入该页面时，该视频不会开始播放，当我转到另一个站点并返回首页时，该视频将正常播放。

我已经删除了该卷的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%);
}

Answer 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>

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

注意：-在本地进行测试。堆栈溢出输出将无法正确播放视频。

HTML5背景视频将无法播放

1 个答案: