在javascript中像视频一样呈现一系列图像
我正在尝试使用JavaScript中的图像流合成视频。 问题是“视频”要么是不稳定的，这是通过使用某种缓冲来解决的。但是现在的问题是，图像的下载速度实际上比渲染速度快得多 如果你有一个改变的图像源，比如IP摄像头，你可以试试下面的例子。我注意到的是，“视频”的更新速度仍然很慢，但是在观看数据包嗅探器时，我可以看到，实际上完全检索图像的速度远远快于渲染图像的速度 以下是一个例子：在javascript中像视频一样呈现一系列图像,javascript,jquery,image,video,Javascript,Jquery,Image,Video,我正在尝试使用JavaScript中的图像流合成视频。 问题是“视频”要么是不稳定的，这是通过使用某种缓冲来解决的。但是现在的问题是，图像的下载速度实际上比渲染速度快得多 如果你有一个改变的图像源，比如IP摄像头，你可以试试下面的例子。我注意到的是，“视频”的更新速度仍然很慢，但是在观看数据包嗅探器时，我可以看到，实际上完全检索图像的速度远远快于渲染图像的速度 以下是一个例子： <HTML> <HEAD> <SCRIPT SRC="http://ajax
<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>
函数startVideo（）
{
//加载缓冲区图像后，将其放入显示器
$（'#图像缓冲区'）。加载（函数（）
{
var loadeImage=$（this.attr（'src'）；
$（“#图像显示”）.attr（'src'，loadeImage）；
$（this.attr（'src'），
'http://path.to/image.jpg?nocache=“+Math.random（））；
});
$（“#图像缓冲区”）.attr（'src'，
'http://path.to/image.jpg?nocache=“+Math.random（））；
}
函数stopVideo（）
{
$（“#图像缓冲区”）.unbind（'load'）；
$（'#图像缓冲区'）.attr（'src'，''）；
$（'图像显示'）.attr（'src'，''）；
}
启动视频
停止视频
窗口.setInterval您可以在显示图像后立即开始加载下一个图像，但您可以让每隔一段时间运行的函数来加载下一个图像，而不是让加载事件来显示它。除非图像的大小以某种方式保证一致，否则您的视频几乎肯定会抖动。即使如此，图像的加载也将取决于网络条件。关于脚本加载图像的速度比显示图像的速度快的问题，我们无法确定其来源，除非我们能够实际访问您的来源 使用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');
查看这里的实时工作代码：我有一个类似的问题（在firefox中不是其他浏览器的问题）。最后，我随意下载了我的电影作为电影带，把它放在一个溢出隐藏的div中，并将图像偏移一帧的高度。节省了几个k的总文件大小来引导！我用gdlib制作了我的电影连续剧，我自己也在寻找解决方案。这是一篇很好的小文章，介绍了如何为IP摄像头机箱做一些非常方便的事情
还可以尝试在图像条（CSS stuf）中加载所有图像（假设不会有大量图像），并使用overflow:hidden隐藏除第一个之外的所有图像。然后使用setInterval更改图像宽度的图像条位置（基本上是一个没有任何过渡动画的快速滑块）。在这种情况下，所有图像都已加载并渲染，您可以控制每个“帧”之间的计时。我在问题中的源代码会导致图像检索速度比渲染速度更快的问题。当我把你的代码和我的相机一起使用的时候。所有的图像总是在60kB左右，并且都在局域网上，所以我认为可能是浏览器无法以下载图像的速度呈现图像。@DaSilva_Ireland在这种情况下，您可能没有使用正确的工具来解决此问题-您可能希望使用更专业的工具来处理此问题