1

通常使用 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 提供替代源？

4

1 回答 1

2

看起来 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（尚未发布，但在 master 分支中）允许在模仿 HTML 媒体元素的对象中封装非本地播放器（例如 YouTube、Vimeo）的模块。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
    }
];
于 2012-11-21T20:45:15.413 回答