Rendering a chain of images like a video in javascript

后端 未结 4 1266
清歌不尽
清歌不尽 2021-01-02 00:10

I\'m trying to synthesize a video using a stream of images in JavaScript. The problem is the \"video\" is either jerky, which was solved by using a buffer of sorts. However

相关标签:
4条回答
  • 2021-01-02 00:27

    Searching for a solution myself. Here is a nice little article about doing something amazingly convenient for IP camera case.

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

    Also try loading all images in an image strip (CSS stuf) (assuming that there would not be a large amount of images) and hide all but first with overflow: hidden. Then change image strip position for the width of the image with setInterval (basically a very quick slider without any transition animations). In that case all images would be already loaded AND rendered and you can control timing between each "frame".

    0 讨论(0)
  • 2021-01-02 00:40

    I had a similar problem (in firefox-not an issue in other browsers.) In the end I litterally downloaded my movie as a filmstrip, put it it in an overflow hidden div and offset the image by the height of a frame. Saves a few k on total file size to boot! I made my filmstrip with gdlib

    0 讨论(0)
  • 2021-01-02 00:41

    Your video will almost certainly be jerky, unless the size of the images are guaranteed to be consistent in some way. And even then, the loading of the images will be dependent on the network conditions. About your problem of the script loading images faster than they are displayed, there's no way to determine the source of that, unless we get actual access to your source.

    Rewriting the code using the Stack Exchange API as the image source, and monitoring activity using Firebug we can see that the network activity roughly match what we see on screen.

    alt text

    The code used is:

    $('#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');
    

    See this code working live here: http://www.jsfiddle.net/yijiang/r957s/

    0 讨论(0)
  • 2021-01-02 00:45

    Instead of loading images as often as possible, you can use the window.setInterval method to make a function run at a set interval, for example ten times a second.

    You can start loading the next image as soon as you have displayed an image, but instead of having the load event showing it, you can let the function that is running at an interval do that.

    0 讨论(0)
提交回复
热议问题