Я пытаюсь синтезировать видео, используя поток изображений в 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>