HTML5video在javascript中完全预加载
我有一个高质量的video，我无法压缩太多，因为它将成为大量图像分析的基础，每个帧将被重绘到canvas然后进行操作。
我试图在播放之前预先加载整个内容，因为我无法将video停止，缓冲并继续。 是否有一个我可以收听的事件，表示在开始播放之前整个video已预先加载？
这是我在JS / jQuery中的表现：
this.canvas = this.el.find("canvas")[0]; this.video = this.el.find("video")[0]; this.ctx = this.canvas.getContext("2d"); this.video.autoplay = false; this.video.addEventListener("play",this.draw) this.video.addEventListener("timeupdate",this.draw) this.video.addeventlistener("ended",this.trigger("complete",this)) canplaythrough是在没有缓冲的情况下下载足够数据时应该触发的事件。
来自Opera团队的优秀（尽管现在可能非常过时）资源您需要了解的有关HTML5video和音频的一切
如果加载成功，无论是使用src属性还是使用源元素，那么在下载数据时，将触发进度事件。 加载足够的数据以确定video的维度和持续时间后，将
loadedmetadata事件。 如果加载了足够的数据来渲染帧，则会触发loadeddata事件。 当加载了数据以便能够播放一些video时，就会触发一个canplay事件。 当浏览器确定它可以播放整个video而不停止下载更多数据时，会触发canplaythrough事件; 如果video具有自动播放属性，也会在video开始播放时播放。
请注意，iOS设备不支持“canplaythrough”事件，如weweplayingyet.org所述： http ：//areweplayingyet.org/event-canplaythrough
您可以通过将load元素绑定到同一个函数来绕过支持限制，因为它会触发那些。
这将以JavaScript加载整个video
var r = new XMLHttpRequest(); r.onload = function() { myVid.src = URL.createObjectURL(r.response); myVid.play(); }; if (myVid.canPlayType('video/mp4;codecs="avc1.42E01E, mp4a.40.2"')) { r.open("GET", "slide.mp4"); } else { r.open("GET", "slide.webm"); } r.responseType = "blob"; r.send();
到目前为止，我们发现最值得信赖的解决方案是播放它并等待缓冲区完全加载。
这意味着如果video很长，您将不得不等待几乎所有的video长度。
我知道，这并不酷。
想知道是否有人已经找到了其他一些神奇可靠的方法（理想情况下使用像PreloadJS这样的东西，当不支持HTML5video时会自动回退到闪存）。
您可以使用这个漂亮的插件： https ： //github.com/GianlucaGuarini/jquery.html5loader在其API中有一个onComplete事件，当插件完成加载所有源时触发
这有用吗？
video.onloadeddata = function(){ video.onseeked = function(){ if(video.seekable.end(0) >= video.duration-0.1){ alert("Video is all loaded!"); } else { video.currentTime=video.buffered.end(0); // Seek ahead to force more buffering } }; video.currentTime=0; // first seek to trigger the event };
希望这可以帮到你
var xhrReq = new XMLHttpRequest(); xhrReq.open('GET', 'yourVideoSrc', true); xhrReq.responseType = 'blob'; xhrReq.onload = function() { if (this.status === 200) { var vid = URL.createObjectURL(this.response); video.src = vid; } } xhrReq.onerror = function() { console.log('err' ,arguments); } xhrReq.onprogress = function(e){ if(e.lengthComputable) { var percentComplete = ((e.loaded/e.total)*100|0) + '%'; console.log('progress: ', percentComplete); } } xhrReq.send();
然后，如果你的videosrc有另一个域，你必须处理CORS。