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

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

本文关键字：一个 有一个 数组 视频 返回 Youtube IFrame API getPlaylist      更新时间：2023-09-26

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

当我运行时，我很难从API获取播放列表信息

player.getPlaylist()

API每次返回一个元素(当前提示的视频(的数组，而不管提示的视频或播放列表。我的JavaScript几乎是API文档的100%复制/粘贴，我不知道为什么我不能在播放列表中获得完整的视频列表。

<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>

有人能伸出援手，指出我的错误或正确的方向吗？

以这种方式加载时，播放列表似乎并没有实际提示，而只是第一个视频。这通过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" ]
相关文章：