我正在尝试将视频设置为页面中的背景。问题是我有一个视频并触发了 1 次下载，然后当它完成时，你会再次开始播放视频，但它也会再次下载。
好像这是一件小事，在第五次迭代之后，它就停止播放视频了。
我现在在 Ubuntu 13.04 上使用 Chrome 30.0.1599.14 开发版
这里是截图
关于如何阻止这种行为的任何建议？
【问题讨论】：
标签： html google-chrome video
<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>
这将使其播放速度更快并将视频存储在本地存储中，因此不再向服务器发出请求。
【讨论】：
localStorage 不是很好的解决方案。 localStorage 的大小非常有限。
我遇到了同样的问题，并在互联网上搜索了解决方案。 我知道这是一篇已有 3 年历史的帖子，但它可能会对遇到此问题的人有所帮助。 就我而言，我们在循环中有一个 +- 24mb .mp4 文件，chrome 在每个循环中都重新下载了视频。我稍微压缩了视频并将视频转换为.webm。文件大小减小到 4.5mb，问题就消失了。
编辑： 似乎与文件大小有关。 4.5mb .mp4 也不会出现此问题。
【讨论】：
解决此问题的唯一方法是将文件加载到本地存储或其他东西中。上例
【讨论】：