Предоставление цепочки изображений, таких как видео в javascript

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

Ответ 1

Поиск решения самостоятельно. Вот хорошая статья о том, как сделать что-то удивительно удобное для корпуса IP-камеры.

http://techslides.com/convert-images-to-video-with-javascript

Также попробуйте загрузить все изображения в полосе изображения (CSS stuf) (при условии, что не будет большого количества изображений) и скрыть все, кроме первого, с переполнением: скрытым. Затем измените положение полосы изображения для ширины изображения с помощью setInterval (в основном, очень быстрый слайдер без какой-либо анимации перехода). В этом случае все изображения будут уже загружены и отображены, и вы можете управлять синхронизацией между каждым "фреймом".

Ответ 2

Ваше видео почти наверняка будет рывком, если только размер изображений не будет гарантированно каким-то образом соответствовать. И даже тогда загрузка изображений будет зависеть от условий сети. О вашей проблеме загрузки script быстрее, чем они отображаются, нет способа определить источник этого, если мы не получим фактический доступ к вашему источнику.

Переписывая код с использованием API-интерфейса Stack Exchange в качестве источника изображения и отслеживая активность с помощью 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');

Смотрите этот код, работающий здесь: http://www.jsfiddle.net/yijiang/r957s/

Ответ 3

У меня была аналогичная проблема (в firefox - не проблема в других браузерах). В конце концов я загрузил свой фильм в качестве кинопленки, поставил его в переполненный скрытый div и смещал изображение по высоте кадра, Сохраняет несколько k для общего размера файла для загрузки! Я сделал свой диафильм с gdlib

Ответ 4

Вместо того, чтобы загружать изображения как можно чаще, вы можете использовать метод window.setInterval для выполнения функции с заданным интервалом, например десять раз в секунду.

Вы можете начать загрузку следующего изображения сразу же после отображения изображения, но вместо того, чтобы показывать это событие загрузки, вы можете позволить этой функции, выполняемой с интервалом, сделать это.