HTML< video loop> - 多次下载 [英] HTML <video loop> - Downloaded multiple times

问题描述

我试图在网页中设置视频作为背景。事情是，我有一个和触发1下载的视频，然后当它完成后，再次开始播放视频，但它也会下载它。

如果这是一个小问题，在第五次迭代后，它只是停止播放视频。

我现在在Ubuntu 13.04上使用Chrome 30.0.1599.14 dev

---

这里和截图

关于如何阻止此行为的任何建议？

解决方案

 < style type =text / css> 
 body {background：url（demo.jpg）center; 
 background-size：300％; 
宽度：100％; 
 height：150px;} 
 video {display：block; } 
 video＃bgvid {
 position：fixed; 
 top：50％; 
剩下：50％; 
最小宽度：100％; 
最低身高：100％; 
 width：auto; 
 height：auto; 
 z-index：-100000; 
 -webkit-transform：translateX（-50％）translateY（-50％）; 
 transform：translateX（-50％）translateY（-50％）; 
 
 $ b @media屏幕和（最大设备宽度：800px）{
 body {background：url（demo.jpg）＃000不重复中心固定; } 
 #bgvid {display：none; } 
} 
< / style> 
< script type =text / javascript> 
 //如果它不在本地存储中
 if（localStorage.getItem（demo）=== null）{
 //请求文件
 var oReq = new XMLHttpRequest（）; 
 oReq.open（POST，http：//LINK_TO_demo.mp4，true）; 
 //二进制文件需要的数组缓冲区
 oReq.responseType =arraybuffer; 
 //一次加载
 oReq.onload = function（oEvent）{
 //转换为Blob对象
 var blob = new Blob（[oReq.response]，{type： 视频/ MP4}）; 
 var reader = new FileReader（）; 
 reader.readAsDataURL（blob）; 
 reader.onload = function（e）{
 var dataURL = reader.result; 
 localStorage.setItem（demo，dataURL）; 
 //重新加载或添加文档准备功能。 
 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'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, but also it download it again.

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

I'm using Chrome 30.0.1599.14 dev right now on Ubuntu 13.04

---

Here's and screenshot

Any suggestions on how to stop this behavior?

解决方案

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

这篇关于HTML< video loop> - 多次下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！