javascript 在javascript中渲染像视频一样的图像链
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4448555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rendering a chain of images like a video in javascript
提问by ArturPhilibin
I'm trying to synthesize a video using a stream of images in JavaScript. The problem is the "video" is either jerky, which was solved by using a buffer of sorts. However now the problem is that images are actually downloaded far faster than they are rendered.
我正在尝试使用 JavaScript 中的图像流合成视频。问题是“视频”要么是生涩的，这是通过使用各种缓冲区解决的。然而现在的问题是图像的实际下载速度比渲染速度快得多。
If you have a source of images that changes, like an IP camera you can try the example below. What I have noticed is that, the "video" still updates quite slowly, however while watching a packet sniffer I can see that the image is actually being fully retrieved far faster than it is being rendered.
如果您的图像源会发生变化，例如 IP 摄像机，您可以尝试以下示例。我注意到的是，“视频”仍然更新得很慢，但是在观看数据包嗅探器时，我可以看到图像实际上被完全检索到的速度比渲染速度快得多。
Here is the example:
这是示例：
<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>
采纳答案by Gawran
Searching for a solution myself. Here is a nice little article about doing something amazingly convenient for IP camera case.
自己寻找解决方案。这是一篇关于为 IP 摄像机外壳做一些非常方便的事情的不错的小文章。
http://techslides.com/convert-images-to-video-with-javascript
http://techslides.com/convert-images-to-video-with-javascript
Also try loading all images in an image strip (CSS stuf) (assuming that there would not be a large amount of images) and hide all but first with overflow: hidden. Then change image strip position for the width of the image with setInterval (basically a very quick slider without any transition animations). In that case all images would be already loaded AND rendered and you can control timing between each "frame".
还尝试在图像条（CSS stuf）中加载所有图像（假设不会有大量图像）并隐藏所有图像，但首先使用溢出：隐藏。然后使用 setInterval 更改图像宽度的图像条位置（基本上是一个非常快速的滑块，没有任何过渡动画）。在这种情况下，所有图像都已加载并渲染，您可以控制每个“帧”之间的时间。
回答by Yi Jiang
Your video will almost certainly be jerky, unless the size of the images are guaranteed to be consistent in some way. And even then, the loading of the images will be dependent on the network conditions. About your problem of the script loading images faster than they are displayed, there's no way to determine the source of that, unless we get actual access to your source.
您的视频几乎肯定会生涩，除非以某种方式保证图像的大小一致。即便如此，图像的加载也将取决于网络条件。关于您的脚本加载图像比显示速度快的问题，除非我们实际访问您的源，否则无法确定其来源。
Rewriting the code using the Stack Exchange API as the image source, and monitoring activity using Firebug we can see that the network activity roughly match what we see on screen.
使用 Stack Exchange API 作为图像源重写代码，并使用 Firebug 监控活动，我们可以看到网络活动与我们在屏幕上看到的大致相符。
The code used is:
使用的代码是：
$('#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');
See this code working live here: http://www.jsfiddle.net/yijiang/r957s/
在此处查看此代码：http: //www.jsfiddle.net/yijiang/r957s/
回答by Trass Vasston
I had a similar problem (in firefox-not an issue in other browsers.) In the end I litterally downloaded my movie as a filmstrip, put it it in an overflow hidden div and offset the image by the height of a frame. Saves a few k on total file size to boot! I made my filmstrip with gdlib
我遇到了类似的问题（在 firefox 中 - 在其他浏览器中不是问题。）最后，我将我的电影作为幻灯片随意下载，将它放在溢出隐藏的 div 中，并将图像偏移一帧的高度。启动时的总文件大小可以节省几个 k！我用 gdlib 制作了我的幻灯片
回答by Guffa
Instead of loading images as often as possible, you can use the window.setIntervalmethod to make a function run at a set interval, for example ten times a second.
您可以使用该window.setInterval方法使函数以设定的时间间隔运行，例如每秒 10 次，而不是尽可能频繁地加载图像。
You can start loading the next image as soon as you have displayed an image, but instead of having the load event showing it, you can let the function that is running at an interval do that.
您可以在显示图像后立即开始加载下一个图像，但不是让加载事件显示它，而是让以间隔运行的函数执行此操作。
