Dynamic and gapless playlist of videos

Question

I would like to show a video on a website made of a dynamic list of smaller videos. For instance, the video would consist of 10 smaller videos (1, 2, 3, 4...), and each of them could be different (1A, 1B, 1C, 1D... 2A, 2B, 2C... 3A). So the result would be 1C-2B-3F-4A...

As you imagine, pregenerating all possible combinations would involve creating thousands of them so the idea is keeping it dynamic. Any ideas on what's the best tool/language on how to do it?

It is important that there are no gaps between them so they feel as one.

Options I'm considering: - Preloaded movies on Flash (AS3) - Preloaded video elements on HTML5 (and some JS) - Using Youtube's API (to use their bandwidth) - Any of the above with some speed-aware caching

Answer 1

I'd suggest streaming with Flash. No precaching is done, so the data transferred is only the data displayed to the user, it's pretty effective in terms of consumption.

I've played with Flash streaming and what you're trying to do isn't far fetched, nor does it require a lot of work. It can be as simple as giving several stream.play2() commands with an APPEND transition.

If you're new to this, there's a nice introductory article here: http://www.adobe.com/devnet/flash/articles/video_playlist.html. Also, the samples can give you a quick start and an idea whether the user experience will live up to your demands.

Answer 2

I had a similar issue, but my playback was triggered by the users. Either way, what solved the problem for me, was the canplaythrough event. It might help you:

function swapVideos(source, target) {
    target.get(0).play();
    target.bind('canplaythrough', function() {
        target.offset({
            top : videoTop,
            left : videoLeft
        });
        source.offset({
            top : 20080,
            left : 20920
        });
        source.get(0).pause();
        var aux = topVideo;
        topVideo = bottomVideo;
        bottomVideo = aux;

    target.unbind('canplaytrough');
    });
}