HTML <video loop> - 已下載多次

我試圖將視頻設置爲頁面中的背景。事情是，我有一個並觸發視頻1下載，然後當它完成後，再次開始播放視頻，但它也下載一次。HTML <video loop> - 已下載多次

就好像這是一件小事情，在第五次迭代之後，它只是停止播放視頻。

我使用Chrome 30.0.1599.14開發，現在在Ubuntu 13.04

這裏的截圖和

Dev tools with the video requests

如何制止這種行爲有什麼建議？

來源

2013-08-28 Diestrin

您是否找到了解決此問題的答案？我有同樣的問題。使用S3也是。謝謝 – James

不幸的是，我目前正在開發另一個網站的背景視頻，同樣的問題仍然存在:( – Diestrin

http://stackoverflow.com/questions/13883569/chrome-re-downloads-video-every-loop – chemoish

解決此問題的唯一方法是在本地存儲中加載文件或其他東西。上面的示例

來源

2015-05-16 06:56:20

歡迎使用StackOverflow。根據@chemoish在問題的評論中發佈的鏈接，只有當您打開Chrome開發工具（並且默認選中禁用緩存）時纔會發生此行爲。您是否可以證實您所說的任何內容 –

發生什麼事是每次視頻循環它再次請求文件和視頻滯後 –

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

這將使其播放速度更快，並將視頻存儲在本地存儲中，以便不再向服務器提出請求。

來源

2015-05-16 20:18:11

保存在'localStorage'不是很好的解決方案localStorage有非常有限的大小 – Petroff

我得到這個工作後，幾個錯誤修復：「POST」應該改爲「GET」，「oReq.send（）」應該放在下面的大括號之後，我希望這已經過測試。 ith sessionStorage。但是，仍然約5MB的限制。 – Hugues

我遇到了同樣的問題，並在網上搜索了一個解決方案。我知道這是一個3歲的帖子，但它可能會幫助遇到此問題的人。在我的情況下，我們在循環中有一個+ - 24mb .mp4文件，chrome red在每個循環中都下載了視頻。我壓縮了一下視頻，並將視頻轉換爲.webm。文件大小減少到4.5mb，問題消失。

編輯：看起來它似乎與文件大小有關。這個問題也不會發生在4.5mb .mp4。

來源

2017-01-31 15:59:56 Jonas

HTML <video loop> - 已下載多次

回答

相關問題