使用 Youtube IFrame API 时，getPlaylist 返回一个只有一个视频的数组答案

【问题标题】：getPlaylist returns an array with only one video when using the Youtube IFrame API使用 Youtube IFrame API 时，getPlaylist 返回一个只有一个视频的数组
【发布时间】：2015-10-06 15:19:20
【问题描述】：

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

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

player.getPlaylist()

API 每次都会返回一个包含一个元素（当前提示的视频）的数组，而不管提示的视频或播放列表如何。我的 JavaScript 几乎 100% 是从 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>

谁能伸出援助之手，指出我的错误或正确的方向？

【问题讨论】：

这个答案教我如何使用 javascript 从 YouTube 播放列表中获取所有视频 ID：stackoverflow.com/a/56723612/470749

标签： javascript api iframe video youtube

【解决方案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" ]

【讨论】：