javascript 中的 HTML5 视频完全预加载 [英] HTML5 video full preload in javascript

问题描述

我有一个高质量的视频，我不能压缩太多，因为它将成为大量图像分析的基础，其中每一帧都将被重新绘制到画布中然后进行处理.

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?

这是我在 JS/jQuery 中的做法:

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 是当下载了足够的数据而无需缓冲即可播放时应触发的事件.

canplaythrough is the event that should fire when enough data has downloaded to play without buffering.

来自 Opera 团队的优秀(虽然现在可能有点过时)资源您需要了解的有关 HTML5 视频和音频的所有信息

From the Opera teams excellent (although maybe very slightly dated now) resource Everything you need to know about HTML5 video and audio

如果加载成功，无论是使用 src 属性还是使用 source 元素，那么在下载数据时，都会触发进度事件.当加载了足够的数据来确定视频的尺寸和持续时间时，会触发 loadedmetadata 事件.当加载了足够的数据来呈现帧时，将触发 loadeddata 事件.当加载了足够的数据以播放视频的一小部分时，会触发 canplay 事件.当浏览器确定它可以在不停止下载更多数据的情况下播放整个视频时，会触发 canplaythrough 事件；如果视频具有自动播放属性，这也是视频开始播放的时间.

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.

此处提供canplaythrough"支持矩阵:https://caniuse.com/mdn-api_htmlmediaelement_canplaythrough_event

'canplaythrough' support matrix available here: https://caniuse.com/mdn-api_htmlmediaelement_canplaythrough_event

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

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

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