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

题

我想编写有效的代码,使用JavaScript在Web浏览器中播放/操作图像.我认为使用视频文件可能会减少http请求.如何从视频中访问单帧的png / jpg /字节码版本？

背景

目前,我有大约1000张图像的序列,这些图像的变化非常小,需要在我的页面上快速访问.通过HTTP请求加载图像将永远(显然),随着我的应用程序的增长,这个数字可能会从1000增加到5000到10,000 ……

对单个图像的Ajax请求不起作用,b / c我需要立即加载图像(并且没有时间等待新的http请求).

我的想法是在服务器上预处理视频文件,显示图像进展 – 每帧一个图像 – 以加快下载速度和浏览器的性能.我觉得这个视频可以根据在线观看视频的速度快速下载到客户端.我陷入了如何从视频中获取帧的图片内容的问题.

HTML5？

请注意,我还没有考虑过HTML5,但愿意考虑是否有所帮助.

解决方法

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

我结合this和this创造了this小提琴.

关键点是获取当前视频帧并将其绘制到canvas元素中.

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

将它放入画布后,您几乎可以对图像做任何事情.