YouTube播放列表代码示例

Question

我想创建一个播放列表，加载特定用户上传的所有视频。

有人建议我使用以下代码（假设要登录的帐户是YouTube）：

loadPlaylist( { listType: 'user_uploads', list: 'youtube' } );

我也浏览了API页面：http://code.google.com/apis/youtube/js_api_reference.html

但我找不到使用加载播放列表的实际示例代码。作为YouTube API的新手，我不知道我需要什么类型的包装器代码才能使以上工作。像这样的东西（当然我缺少零件）：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>    
<script type="text/javascript">
loadPlaylist( { listType: 'user_uploads', list: 'youtube' } );
</script>

或者，如果有人能提供原始加载播放列表行的工作示例，那就太好了，我可以从那里自己处理我需要的其他细节。

-YouTube API新手

Answer 1

首先，我建议您使用IFRAME嵌入样式，因为它可以在桌面和移动设备上工作（iOS、Android、BB、Windows，非常好）。示例代码位于Youtube IFRAME嵌入中。这一个包含了供您开始使用的html代码。

让我们进入你的问题。

1假设您将youtube播放器作为

player = new YT.Player('player', {
      height: '390',
      width: '640',
        videoId: 'u1zgFlCw8Aw',
      events: {
        'onReady': onPlayerReady
      }
});

不要在意videoId。只需插入任何有效的youtube视频的ID即可。

注意，我们注册"准备就绪"：onPlayerReady

2使用onPlayerReady将播放列表加载到播放器中

function onPlayerReady(event) { 
    event.target.loadPlaylist({list: "UUPW9TMt0le6orPKdDwLR93w", index: 1, startSeconds: 10,suggestedQuality: "small"});
}

您可以在Youtube JSAPI参考上阅读更多信息希望这对你有用。^^。

---

更新

您也可以在playerVars对象中指定播放列表。

function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
        videoId: 'u1zgFlCw8Aw',
        playerVars: {
          listType:'playlist',
          list: 'UUPW9TMt0le6orPKdDwLR93w'
        },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

Answer 2

it has the feature
-make playlist of video id. 
-to play next and previous.
-play,pause and stop

https://jsfiddle.net/Physcocybernatics/6dkw8e7r/

<div id="player"></div>
<div class="buttons">
        <button class="button" id="play-button">PLAY</button>
        <button class="button" id="pause-button">PAUSE</button>
        <button class="button" id="previous">previous</button>
        <button class="button" id="next">Next</button>
        <button class="button" id="stop-button">STOP</button>
    </div>

/**
 * Put your video IDs in this array
 */
var videoIDs = [
  'kJQP7kiw5Fk',
  '2cv2ueYnKjg',
  'nfs8NYg7yQM',
  'ClU3fctbGls'
];
var player, currentVideoId = 0;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    playerVars: {
      controls: 1,
      showinfo: 0,
      rel: 0,
      showsearch: 0,
      iv_load_policy: 3
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}
function onPlayerReady(event) {
  event.target.loadVideoById(videoIDs[currentVideoId]);
    // bind events
    var playButton = document.getElementById("play-button");
    playButton.addEventListener("click", function() {
        player.playVideo();
    });
    var pauseButton = document.getElementById("pause-button");
    pauseButton.addEventListener("click", function() {
        player.pauseVideo();
    });
    var stopButton = document.getElementById("stop-button");
    stopButton.addEventListener("click", function() {
        player.stopVideo();
    });
 var next = document.getElementById("next");
    next.addEventListener("click", function() {
        player.nextVideo();
    });
 var pre = document.getElementById("previous");
    pre.addEventListener("click", function() {
        player.previousVideo();
    });
     player.loadPlaylist( {
        playlist:videoIDs
    } );

}
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.ENDED) {
    currentVideoId++;
    if (currentVideoId < videoIDs.length) {
      player.loadVideoById(videoIDs[currentVideoId]);
    }
  }
}