Video.js中的Youtube播放列表

时间:2014-02-21 18:54:20

标签: youtube video.js playlist

我正在尝试使用Video.js制作YouTube网址的播放列表,并为Video.js制作2个插件:videojs-playlistsvideojs-youtube。正确包含所有内容,并且在单独使用每个插件时都能正常工作。但是,当我尝试使用播放列表插件播放YouTube网址列表时,我在FF(永远不会结束!)中获得视频加载轮,而在Chrome中,加载了开始框架但播放按钮没有响应。 Firebug在代码中没有显示任何错误,但显然有些东西在某处停滞不前。这是相关的代码:

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

});`

1 个答案:

答案 0 :(得分:0)

我最近尝试了这些插件,但我发现了问题。

问题在于:

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

确保为cb方法设置第一个值是链接字符串而不是对象。 (例如:&#39; https://www.youtube.com/watch?v=videoID&#39)

祝你好运:)