HTML <video loop> - Downloaded several times

Question

I am trying to set the video as background on the page. The fact is that I also have trigger 1 download for the video, then when it finishes, I start playing the video again, but also download it again.

As if it were a small thing, after the fifth iteration, it just stops playing the video.

I am using Chrome 30.0.1599.14 dev right now on Ubuntu 13.04

---

Here is a screenshot

Any suggestions on how to stop this behavior?

Answer 1

<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 speed up playback and save the video in local storage so that the server no longer receives a request.

Answer 2

I had the same problem and searched the Internet for a solution. I know this is a 3 year post, but it can help people who are facing this problem. In my case, we had a + - 24mb.mp4 file in the loop, chrome redownloaded video in each loop. I compressed the video a bit and converted the video to .webm. The file size was reduced to 4.5 MB, and the problem disappeared.

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

Answer 3

The only way around this problem is to upload the file to local storage or something else. Example above