Video.js 中的 Youtube 播放列表答案

【问题标题】：Youtube Playlist in Video.jsVideo.js 中的 Youtube 播放列表
【发布时间】：2014-02-21 18:54:20
【问题描述】：

我正在尝试使用 Video.js 和 2 个 Video.js 插件构建 YouTube URL 的播放列表：videojs-playlists 和 videojs-youtube。当每个插件单独使用时，所有内容都正确包含并且运行良好。但是，当我尝试使用播放列表插件播放 YouTube URL 列表时，我在 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();
  });

});`

【问题讨论】：

标签： youtube video.js playlist

【解决方案1】：

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

问题出在这里：

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

确保为 cb 方法设置的第一个值是链接字符串而不是对象。（例如：'https://www.youtube.com/watch?v=videoID'）

祝你好运:)

【讨论】：