HTML5背景视频将无法播放

Question

I have a problem with a HTML5 background video. 我对HTML5背景视频有疑问。 The video is on the front page and should be started automatically without sound. 视频在首页上，应自动开始播放，且无声音。 after a click on a button, it should play with 20% volume. 单击按钮后，它应以20％的音量播放。 My code works in Mozilla Firefox without any problems. 我的代码可以在Mozilla Firefox中正常运行。 But not in Safari or MS Edge. 但不是在Safari或MS Edge中。 in Google Chrome only conditionally. 仅在Google Chrome中有条件地使用。 When I enter the page, the video does not start, when i change to another site and go back to the home page, the video works. 当我进入页面时，视频不会开始，当我转到另一个站点并返回首页时，视频就可以了。

I have already removed the JS Code for the volume and tested only with .mp4-video. 我已经删除了该卷的JS代码，并且仅使用.mp4-video进行了测试。 Without success. 没有成功。

HTML: 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: 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: 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

Below is the updated code which is working as expected in Edge and Firefox. 以下是在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>

Further, You can try to modify code as per your requirement. 此外，您可以尝试根据需要修改代码。

Note:- Make a test locally. 注意：-在本地进行测试。 Stack Overflow output will not play the video properly. 堆栈溢出输出将无法正确播放视频。

HTML5背景视频将无法播放

问题描述

1 个解决方案

解决方案1
0 2018-10-05 02:59:54

HTML5背景视频将无法播放

问题描述

1 个解决方案

解决方案1 0 2018-10-05 02:59:54

解决方案1
0 2018-10-05 02:59:54