HTML中的HTML5视频完全预加载

Question

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

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

这是我在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))

Answer 1

这将在JavaScript中加载整个视频

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();

Answer 2

1. 使用 fetch 下载视频
2. 将响应转换为 blob
3. 从 blob 创建对象 URL（例如 blob:http://localhost:8080/df3c4336-2d9f-4ba9-9714-2e9e6b2b8888）

async function preloadVideo(src) {
  const res = await fetch(src);
  const blob = await res.blob();
  return URL.createObjectURL(blob);
}

用法：

const video = document.createElement("video");
video.src = await preloadVideo("https://example.com/video.mp4");

Answer 3

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

来自Opera团队的优秀(尽管现在可能非常有点过时)资源您需要了解的有关HTML5视频和音频的所有内容

如果加载成功,无论是使用src属性还是使用源元素,那么在下载数据时,将触发进度事件.加载足够的数据以确定视频的尺寸和持续时间后,将loadedmetadata触发事件.如果加载了足够的数据来渲染帧,loadeddata则会触发该事件.当加载了数据以便能够播放一点视频时,canplay会触发一个事件.当浏览器确定它可以播放整个视频而不停止下载更多数据时,canplaythrough会触发一个事件; 如果视频具有自动播放属性,也会在视频开始播放时播放.

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

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