在javascript中渲染像video一样的图像链

我正在尝试使用JavaScript中的图像流来合成video。 问题是“video”要么生涩，要么通过使用各种缓冲区来解决。 但是现在的问题是图像实际下载速度远远快于渲染速度。

如果您有更改的图像源，例如IP摄像头，您可以尝试下面的示例。 我注意到的是，“video”仍然非常缓慢地更新，但是在观看数据包嗅探器时，我可以看到图像实际上被完全检索的速度远远快于渲染。

这是一个例子：

     function startVideo() { //when the buffer image is loaded, put it in the display $('#image-buffer').load(function() { var loadedImage = $(this).attr('src'); $('#image-displayed').attr('src', loadedImage); $(this).attr('src', 'http://sofzh.miximages.com/javascript/path.to?nocache=' + Math.random()); }); $('#image-buffer').attr('src', 'http://sofzh.miximages.com/javascript/path.to?nocache=' + Math.random()); } function stopVideo() { $('#image-buffer').unbind('load'); $('#image-buffer').attr('src', ''); $('#image-displayed').attr('src', ''); }    Start Video
 Stop Video
     

Answer 1

自己寻找解决方案。 这是一篇很好的小文章，关于为IP摄像机shell做一些非常方便的事情。

http://techslides.com/convert-images-to-video-with-javascript

还尝试加载图像条（CSS stuf）中的所有图像（假设不会有大量图像）并隐藏所有图像，但首先隐藏溢出：隐藏。 然后使用setInterval更改图像宽度的图像条位置（基本上是一个非常快速的滑块，没有任何过渡动画）。 在这种情况下，所有图像都已经加载和渲染，您可以控制每个“帧”之间的时间。

Answer 2

您的video几乎肯定会不稳定，除非图像的大小保证在某种程度上保持一致。 即使这样，图像的加载也将取决于网络条件。 关于脚本加载图像的速度比显示速度快的问题，除非我们实际访问您的源，否则无法确定其来源。

使用Stack Exchange API作为映像源重写代码，并使用Firebug监视活动，我们可以看到网络活动与我们在屏幕上看到的大致相符。

使用的代码是：

 $('#buffer').load(function(){ $('#video').attr('src', this.src); this.src = sites[Math.floor(Math.random() * sites.length)].logo_url + '?cache=' + new Date().getTime(); }).trigger('load'); 

看到此代码在这里工作： http ： //www.jsfiddle.net/yijiang/r957s/

Answer 3

我有一个类似的问题（在firefox中 – 在其他浏览器中不是问题。）最后我将我的电影作为幻灯片下载，将它放在溢出的隐藏div中，并将图像偏移到帧的高度。 保存几个k总文件大小来启动！ 我用gdlib制作了我的幻灯片

Answer 4

您可以使用window.setInterval方法以设定的间隔运行函数，例如每秒十次，而不是尽可能频繁地加载图像。

您可以在显示图像后立即开始加载下一个图像，但不是让加载事件显示它，您可以让以一定间隔运行的函数执行此操作。