HTML5视频在javascript中完全预加载

我有一个高质量的视频,我无法压缩太多,因为它将成为大量图像分析的基础,每个帧将被重绘到画布然后进行操作.

我试图在播放之前预先加载整个内容,因为我无法将视频停止,缓冲并继续.是否有一个我可以收听的事件,表示在开始播放之前整个视频已预先加载？

这是我在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团队出色(虽然现在可能非常过时)资源Everything you need to know about HTML5 video and audio

If the load is successful,whether using the src attribute or using source elements,then as data is being downloaded,progress events are fired. When enough data has been loaded to determine the video’s dimensions and duration,a loadedMetadata event is fired. When enough data has been loaded to render a frame,the loadeddata event is fired. When enugh data has been loaded to be able to play a little bit of the video,a canplay event is fired. When the browser determines that it can play through the whole video without stopping for downloading more data,a canplaythrough event is fired; this is also when the video starts playing if it has a autoplay attribute.

请注意,iOS设备不支持“canplaythrough”事件,如areweplayingyet.org:http://areweplayingyet.org/event-canplaythrough所述

您可以通过将load元素绑定到同一个函数来绕过支持限制,因为它会触发那些.