Question

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

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

以下是示例：

<HTML>
  <HEAD>
    <SCRIPT SRC="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
    </SCRIPT>
    <SCRIPT>
      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://path.to/image.jpg?nocache=' + Math.random());
        });

        $('#image-buffer').attr('src',
          'http://path.to/image.jpg?nocache=' + Math.random());
      }

      function stopVideo()
      {
        $('#image-buffer').unbind('load');
        $('#image-buffer').attr('src', '');
        $('#image-displayed').attr('src', '');
      }
    </SCRIPT>
  </HEAD>
  <BODY>
    <BUTTON ONCLICK="startVideo();">Start Video</BUTTON><BR/>
    <BUTTON ONCLICK="stopVideo();">Stop Video</BUTTON><BR/>
    <IMG ID="image-displayed"/>
    <IMG ID="image-buffer" STYLE="visibility: hidden;"/>
  </BODY>
</HTML>

Answer 1

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

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

alt text

使用的代码是：

$('#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 2

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

制作了我的幻灯片

Answer 3

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

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

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

Answer 4

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

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

在javascript中渲染像视频一样的图像链

4 个答案: