使用Javascript/jquery访问视频中帧的图片内容

Question

问题

我想用JavaScript编写在web浏览器中播放/操作图像的高效代码。我认为使用视频文件可以减少http请求。如何从视频中访问单个帧的png/jpg/bytecode版本？

背景

目前，我有一系列的~1000张图片，它们的变化非常小，需要在我的页面上快速访问。通过HTTP请求加载图像需要花费很长时间(显然)，随着我的应用程序的增长，这个数字很可能会从1000增加到5000到10,000 .

对于单个图像的Ajax请求将无法工作，b/c -我需要立即加载映像(并且没有时间等待新的http请求)。

我的想法是在服务器上预处理一个视频文件，它显示图像的进展--每帧一幅图像--以加快下载速度和浏览器的性能。我觉得这个视频可以根据在线观看视频的速度快速下载到客户端。我被困在如何从视频中获取画面内容的问题上。

HTML5?

注意，我还没有研究过HTML5，但是我愿意考虑它是否有用。

Answer 1

您可以将视频帧绘制到html5画布上。

我通过将这和这结合起来创建了这小提琴。

关键是获取当前的视频帧并将其绘制到画布元素中。

var delay=20;
function draw(cvideo,ccanvas,canvas_width,canvas_height) {
  if(cvideo.paused || cvideo.ended) return false;
  ccanvas.drawImage(cvideo,0,0,canvas_width,canvas_height);
  setTimeout(draw,delay,cvideo,ccanvas,canvas_width,canvas_height);
}

在进入画布之后，您几乎可以对图像做任何事情。

Answer 2

与使用视频文件不同，您可以使用影像精灵 --基本上可以将多个图像组合成一个大图像，其中只显示适当的区域(假设所有图像都具有相同的维度，这很容易)--这将在很大程度上减少所需的HTTP请求数量，并依次加快加载过程。