getPlaylist returns 使用 Youtube IFrame 时只有一个视频的数组 API

Question

我正在尝试制作一个网页，该网页将加载给定的 Youtube 播放列表并随机播放其中的视频。

我正在努力从 API 获取播放列表信息，就像我运行

player.getPlaylist()

API returns 每次都包含一个元素（当前提示的视频）的数组，无论提示的视频或播放列表如何。我的 JavaScript 几乎 100% copy/paste 来自 API 文档，我不明白为什么我无法在播放列表中获取完整的视频列表。

<script>

  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode
    .insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      playerVars: {
        listType: 'playlist',
        list: 'PLbIZ6k-SE9SiarIg09JXUdK2kDX5_OB25',
        autoplay: 0,
        controls: 1
      },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerReady(event) {
    console.log(event.target.getPlaylist());
  }

  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED && !done) {
      done = true;
      console.log('Video Finished');
      stopVideo();
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>

任何人都可以伸出援手并指出我的错误或正确的方向吗？

Answer 1

以这种方式加载时，似乎播放列表实际上并未被提示，而只是第一个视频。 getPlaylist() 仅返回一个视频，并且 onStateChange 事件在播放器加载后不会触发。

证实了这一点。

然而，我们可以强制播放器使用 cuePlaylist() 提示播放列表。下面介绍的可以看这个JSFiddle.

我们将构造函数修改为不加载任何内容：

playerVars: {
    autoplay: 0,
    controls: 1
},

我们修改onPlayerReady()来提示播放列表：

function onPlayerReady(event) {
    event.target.cuePlaylist({
        listType: 'playlist',
        list: 'PLbIZ6k-SE9SiarIg09JXUdK2kDX5_OB25',
    });
}

我们修改 onPlayerStateChange() 以检查 CUED 状态并在它触发时获取播放列表：

function onPlayerStateChange(event) {

    if (event.data == YT.PlayerState.CUED) {
        console.log(event.target.getPlaylist());
    }

    if (event.data == YT.PlayerState.ENDED && !done) {
        done = true;
        console.log('Video Finished');
        stopVideo();
    }
}

之后控制台输出：

Array [ "j_OyHUqIIOU", "PK8dsAeMmPk", "lfvceHUBWnU", "Xz5z1hBxejg",
        "OubvTOHWTms", "5WKU7gG_ApU", "XjwO9InuFJk", "lNqChN3WHh8" ]

getPlaylist returns 使用 Youtube IFrame 时只有一个视频的数组 API

getPlaylist returns an array with only one video when using the Youtube IFrame API

javascript

youtube

api

video

iframe