Question

通常使用html5视频，您可以指定其他格式，以便浏览器找到满意的格式：

<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>

使用sequence.js我可以找到的所有演示只为序列中的每个剪辑指定一种格式：

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

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

基本上：

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
                    }
                ]);

有人能告诉我是否可以提供带有sequence.js的替代来源？

Answer 1

它看起来不像Popcorn.sequence会处理多个来源，但有很多方法可以解决这个问题。

一种选择是使用canPlayType来检测浏览器可以播放的格式，然后相应地设置源。像这样：

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;
}

理论上，canPlayType并非100％准确，因为浏览器可能不支持实际视频编码的变化，但这在实践中通常不是问题。

另一种选择是使用Popcorn Splice Player。 Popcorn 1.4（尚未发布，但在主分支中）允许模块将非本地播放器（例如YouTube，Vimeo）包装在模仿HTML媒体元素的对象中。 Splice Player是一个这样的模块，它将组合多个媒体源并将它们作为一个单一视频播放。它将支持多种来源。

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
    }
];

使用Mozilla Popcorn和sequence.js加载备用视频源

1 个答案: