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 embed。这个包含html代码供您开始使用。

让我们进入你的问题。

1假设你将youtube播放器视为

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

不关心 videoId 。只需插入任何有效的YouTube视频ID。

请注意我们注册'onReady'：onPlayerReady

2使用 onPlayerReady

将播放列表加载到播放器中

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

您可以在Youtube JSAPI reference上阅读更多内容希望这对你有用。 ^^

更新

您还可以在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]);
    }
  }
}

YouTube播放列表代码示例？

2 个答案: