2014-02-21 64 views
0

我在嘗試使用Video.js和2個Video.js插件構建YouTube網址播放列表:videojs-playlistsvideojs-youtube。一切都包含正確,並在單獨使用每個插件時運行良好。但是,當我嘗試使用播放列表插件播放YouTube網址列表時,我在FF中獲得了視頻加載輪(它永遠不會結束!),並且在Chrome中,加載了開始幀,但播放按鈕沒有響應。 Firebug在代碼中沒有顯示任何錯誤,但顯然有些東西在拖延。下面是相關的代碼:Youtube播放列表Video.js

HTML:

video id="video" class="video-js vjs-default-skin" controls data-setup='' width="640" height="264"></video> 
<h1></h1> 
<button type="button" data-action="prev">Previous</button> 
<button type="button" data-action="next">Next</button> 

而我的JS:

var videos = [ 
{ 
src : [ 
    'http://stream.flowplayer.org/bauhaus/624x260.webm', 
    'http://stream.flowplayer.org/bauhaus/624x260.mp4', 
    'http://stream.flowplayer.org/bauhaus/624x260.ogv' 
], 
poster : '', 
title : 'Whales' 
}, 
{ 
src : [ 
    'https://www.youtube.com/watch?v=3sWPKAbQZVM' 
], 
poster : 'http://www.videojs.com/img/poster.jpg', 
title : 'Ocean' 
} 
]; 
var options = { "techOrder": ["youtube", "html5", "flash"] }; 
//var options = { "techOrder": ["youtube"] , "src" : "https://www.youtube.com/watch?v=GaMcsKtBDwE"}; //Single works - but not with playlist 
var player = videojs('video', options); 
    player.playList(videos, { 
    getVideoSource: function(vid, cb) { 
    cb(vid.src, vid.poster); 
    } 
    }); 
    $('[data-action=prev]').on('click', function(e) { 
    player.prev(); 
    }); 
    $('[data-action=next]').on('click', function(e) { 
    player.next(); 
    }); 

});` 

回答

0

我最近嘗試這些插件,我發現這個問題。

的問題是在這裏:

getVideoSource: function(vid, cb) { 
    cb(vid.src, vid.poster); 
} 

確保您爲CB方法的第一個值是一個鏈接字符串,而不是一個對象。 (例如:'https://www.youtube.com/watch?v=videoID')

祝你好運:)