HTML5视频完全预装在JavaScript中 [英] HTML5 video full preload in 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（ end，this.trigger（complete，this））
  

解决方案

canplaythrough 是在没有缓冲的情况下下载足够数据时应该触发的事件。

来自歌剧团队出色（尽管现在可能已经过时了）资源您需要了解的有关HTML5视频和音频的所有内容

如果加载成功，是否使用src属性或使用源元素，然后当数据被下载时，进度事件被触发。如果加载了足够的数据来确定视频的尺寸和持续时间，则会触发 loadedmetadata 事件。当足够的数据被加载以渲染帧时，会触发 loadeddata 事件。当数据载入后可以播放一点点视频时，会触发 canplay 事件。当浏览器确定它可以播放整个视频而不停止下载更多数据时，会触发 canplaythrough 事件;这也是当视频开始播放时，如果它具有自动播放属性。

请注意，iOS设备不支持'canplaythrough'事件，正如areweplayingyet.org上所述： http://areweplayingyet.org/event-canplaythrough

你可以得到通过将 load 元素绑定到同一个函数来支持限制，因为它将触发这些元素。

I have a high quality video which I cannot compress too much as it's going to be the base of a lot of image analysis whereby each frame will be redrawn into the canvas and then manipulated.

I'm trying to preload the whole thing before playing it as I can't have the video stop, buffer and continue. Is there an event which I can listen for which signifies that the whole video has preloaded before I commence playback?

Here's how I'm doing it in 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 is the event that should fire when enough data has downloaded to play without buffering.

From the Opera teams excellent (although maybe very slightly dated now) resource 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.

Note that the 'canplaythrough' event isn't supported on iOS devices as stated on areweplayingyet.org: http://areweplayingyet.org/event-canplaythrough

You can get around the support limitations by binding the load element to the same function, as it will trigger on those.

这篇关于HTML5视频完全预装在JavaScript中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！