交替加載視頻源和sequence.js

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

誰能告訴我，如果有可能提供替代源與sequ​​ence.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 
    } 
];