Loading alternate video sources with Mozilla Popcorn and sequence.js

Question

Normally with html5 video you specify alternative formats so the browser an find one that it's happy with:

<video height="180" width="300" id="ourvideo">
  <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4">
  <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv">
  <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm">
</video>

With sequence.js all the demos I can find only specify one format for each clip in the sequence:

http://jsfiddle.net/jmTgD/1/

http://scotland.proximity.on.ca/cadecairos/sequence/issue11/test/functional-plugin.html

essentially:

var sequence = Popcorn.sequence(
                "container-id",
                [
                    {
                        src: "http://videos.mozilla.org/serv/webmademovies/atultroll.webm",
                        in: 0,
                        out: 3
                    },
                    {
                        src: "http://videos.mozilla.org/serv/webmademovies/justintime.ogv",
                        in: 174,
                        out: 180
                    },
                    {
                        src: "http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv",
                        in: 0,
                        out: 6
                    }
                ]);

Can anyone tell me if it's possible to supply alternate source with sequence.js?

Answer 1

It doesn't look like Popcorn.sequence will handle more than one source, but there are ways around this.

One option is to use canPlayType to detect which format the browser can play and then set the source accordingly. Something like this:

var ext = 'ogv', i, vid,
    formats = {
        'mp4': 'mp4',
        'webm': 'webm',
        'ogg': 'ogv'
    },
    files = ['atultroll', 'justintime', 'popcornplug'];

var vid = document.createElement('video');
for (i in formats) {
    if (vid.canPlayType(i)) {
        ext = formats[i];
        break;
    }
}
for (i = 0; i < files.length; i++) {
    files[i] += ext;
}

In theory, canPlayType is not 100% accurate, since there are variations in the actual video encode that a browser may not support, but this is not typically a problem in practice.

The other option is to use Popcorn Splice Player. Popcorn 1.4 (not yet released, but in the master branch) allows for modules that wrap non-native players (e.g. YouTube, Vimeo) in objects that mimic HTML media elements. Splice Player is one such module that will combine multiple media sources and play them as one single video. It will support multiple sources.

var player = Popcorn.SplicePlayer('#container');
player.src = [
    {
        src: [ "atultroll.mp4", "atultroll.webm", "atultroll.ogv" ],
        from: 0,
        to: 3
    },
    {
        src: [ "justintime.mp4", "justintime.webm", "justintime.ogv" ],
        from: 174,
        to: 180
    },
    {
        src: [ "popcornplug.mp4", "popcornplug.webm", "popcornplug.ogv" ]",
        from: 0,
        to: 6
    }
];