我正在使用
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>
解决方法
自己搜索一个解决方案这是一个很好的小文章,做一些非常方便的IP摄像机案例的东西.
http://techslides.com/convert-images-to-video-with-javascript
还要尝试加载图像条(CSS stuf)中的所有图像(假设不会有大量图像),并首先使用overflow：hidden隐藏所有图像.然后使用setInterval更改图像宽度的图像位置(基本上是非常快的滑块,不需要任何过渡动画).在这种情况下,所有图像都将被加载并呈现,您可以控制每个“帧”之间的时序.
