在 javascript 中呈现像视频一样的图像链答案

【问题标题】：Rendering a chain of images like a video in javascript在 javascript 中呈现像视频一样的图像链
【发布时间】：2011-05-25 19:33:58
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： javascript jquery image video

【解决方案1】：

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

使用 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/

【讨论】：

我在问题中的源代码导致图像检索速度比渲染速度快的问题。当我将它与我的相机一起使用时，您的代码也是如此。所有图像始终在 60kB 左右，并且位于 LAN 上，所以我认为可能只是浏览器无法像下载图像那样快速渲染图像。
@DaSilva_Ireland 在这种情况下，您可能没有使用正确的工具来解决问题 - 您可能希望继续使用更专业的工具来处理此问题

【解决方案2】：

自己寻找解决方案。这是一篇不错的小文章，介绍了如何为 IP 摄像机外壳做一些非常方便的事情。

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：