Вопросы Теги

Rendering a chain of images like a video in javascript

Я пытаюсь синтезировать видео, используя поток изображений в JavaScript. The problem is the "video" is either jerky, which was solved by using a buffer of sorts. However now the problem is that images are actually downloaded far faster than they are rendered.

If you have a source of images that changes, like an IP camera you can try the example below. What I have noticed is that, the "video" still updates quite slowly, however while watching a packet sniffer I can see that the image is actually being fully retrieved far faster than it is being rendered.

Here is the example:

<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>
12
задан ArturPhilibin 15 December 2010 в 09:45
поделиться