HTML <video loop> - Downloaded multiple times

Question

I\'m trying to set up a video as a background in a page. The thing is that i have a and triggers 1 download for the video, then when it finishes y start playing the video again

Answer 1

I've had the same problem and searched the internet for a solution. I know this is a 3 year old post, but it might help people who run into this issue. In my case we had a +- 24mb .mp4 file in loop, chrome redownloaded the video on every loop. I compressed the video a bit and converted the video to a .webm. The file size was reduced to 4.5mb and the problem disappeared.

Edit : It seems like it has something to do with the file size. The problem also does not occur with a 4.5mb .mp4.

Answer 2

The only way to get around this issue is to load the file in local Storage or something. Example Above

Answer 3

 <style type="text/css">
body { background: url(demo.jpg) center; 
background-size: 300%;
width:100%;
height:150px;}
video { display: block; }
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100000;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

}
@media screen and (max-device-width: 800px) {
body { background: url(demo.jpg) #000 no-repeat center center fixed; }
#bgvid { display: none; }
}
</style>
<script type="text/javascript">
//if it is not already in local storage
if (localStorage.getItem("demo") === null){
 //make request for file
var oReq = new XMLHttpRequest();
oReq.open("POST", "http://LINK_TO_demo.mp4", true);
 // arraybuffer needed for binary file 
oReq.responseType = "arraybuffer";
 // once loaded 
oReq.onload = function(oEvent) {
 // Convert to Blob Object
var blob = new Blob([oReq.response], {type: "video/mp4"});
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function(e) {
var dataURL = reader.result;
localStorage.setItem("demo", dataURL);
// reload or add document ready function.
location.reload();
}
oReq.send();}} 
var videlem = document.createElement("video");
videlem.autoplay = true;
videlem.loop = true;
videlem.poster = "demo.jpg";
videlem.id = "bgvid";
var sourceMP4 = document.createElement("source"); 
sourceMP4.type = "video/mp4";
sourceMP4.src = localStorage.getItem("demo");
sourceMP4.autoPlay = true;
videlem.appendChild(sourceMP4);
document.body.appendChild(videlem);    
</script>

This will make it play faster and stores the video in local Storage so there no more request made to the server.