Art*_*bin 12 javascript video jquery image
我正在尝试使用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）中的所有图像（假设不会有大量图像）并隐藏所有图像，但首先使用溢出：隐藏。然后使用 setInterval 更改图像宽度的图像条位置（基本上是一个非常快速的滑块，没有任何过渡动画）。在这种情况下，所有图像都已加载并渲染，您可以控制每个“帧”之间的时间。
| 归档时间： |
|
| 查看次数： |
11093 次 |
| 最近记录： |