HTML5 background video will not play
Question
I have a problem with a HTML5 background video. 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. My code works in Mozilla Firefox without any problems. But not in Safari or MS Edge. in Google Chrome only conditionally. 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. Without success.
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%);
}
1 answers
solution1
0 2018-10-05 02:59:54
Below is the updated code which is working as expected in Edge and 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.