HTML <video loop> - Đã tải xuống nhiều lần

Question

Tôi đang cố gắng thiết lập video làm nền trong một trang. Điều này là tôi có một và kích hoạt 1 tải xuống cho video, sau đó khi nó kết thúc y bắt đầu phát lại video, nhưng cũng có thể tải xuống lại.

Như thể đây là một điều nhỏ, sau lần lặp thứ năm, nó chỉ dừng phát video.

Tôi đang sử dụng Chrome 30.0.1599.14 dev ngay bây giờ trên Ubuntu 13,04

---

Dưới đây là ảnh chụp màn hình và

Bất kỳ đề xuất về cách ngăn chặn hành vi này?

Answer 1

Cách duy nhất để khắc phục sự cố này là tải tệp trong Bộ nhớ cục bộ hoặc một thứ gì đó. Ví dụ trên

Answer 2

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

Điều này sẽ làm cho nó phát nhanh hơn và lưu trữ video trong Bộ nhớ cục bộ để không còn yêu cầu nào được thực hiện cho máy chủ.

Answer 3

Tôi đã gặp sự cố tương tự và đã tìm kiếm trên Internet giải pháp. Tôi biết đây là bài đăng cũ 3 năm nhưng có thể giúp những người gặp sự cố này. Trong trường hợp của tôi, chúng tôi đã có một tệp + - 24mb .mp4 trong vòng lặp, chrome đã tải xuống lại video trên mỗi vòng lặp. Tôi đã nén video một chút và chuyển đổi video thành .webm. Kích thước tệp đã giảm xuống còn 4.5mb và sự cố đã biến mất.

Chỉnh sửa: Dường như nó có liên quan đến kích thước tệp. Vấn đề cũng không xảy ra với 4.5mb .mp4.