YouTube IFrame 播放器无法正确执行 cuePlayList答案

【问题标题】：YouTube IFrame Player doesn't execute cuePlayList correctlyYouTube IFrame 播放器无法正确执行 cuePlayList
【发布时间】：2021-05-17 04:27:41
【问题描述】：

我有一个网站，我在 IFrame 中创建了一个 YouTube 播放器，并让它根据用户点击的内容抓取不同的播放列表。所以它调用player.cuePlaylist({listType:"playlist",list:playListID}) 其中playListID是当用户调用不同的播放列表时改变的变量。问题是函数第一次执行时它工作正常，但是一旦第二次要求它提示一个新的播放列表，它什么也不做，没有 400 错误消息或任何东西，但是当我调用第二个播放列表 第二次 次，它可以工作。

这个 cuePlayList 函数似乎有问题，因为这不是在一两个月前发生的。我可以看到 youtube Iframe API 的唯一变化是关于搜索列表，而不是播放列表，因为您可以阅读 here

我在jsfiddle 中重新创建了错误。只需按“新播放列表”按钮，它就会加载正确的播放列表，按另一个播放列表，直到按两次它才会执行任何操作。

那么是我做错了什么还是在 YouTube 的 IFrame API 端？

提前致谢！

【问题讨论】：

cuePlaylist 和 loadPlaylist 都有同样的问题。感谢您的帖子，因为它激励我放弃尝试通读 Youtube API 文档并想出一个解决方法。

标签： javascript youtube youtube-iframe-api

【解决方案1】：

如果您还必须指定一个特定的索引开始，上述方法，在一定的毫秒数后链接一个空调用和实际的 cue 函数，似乎不再有效。新播放列表已正确加载，但无论更新发生时您在播放列表中的哪个位置，索引都设置回 0。

解决问题的方法与上述方法没有什么太大的不同：您可以简单地将回调函数分配给一个变量并将其链接起来。示例：https://jsfiddle.net/o0f815t3/

const cIndex = player.getPlaylistIndex(),
  cTime = player.getCurrentTime(),
  callback = function() { player.cuePlaylist(myPlaylist, cIndex, cTime) };
callback();
setTimeout(() => { callback() }, 500)

【讨论】：

【解决方案2】：

没有破坏播放器，这意味着你不能再使用cuePlaylist()和loadPlaylist()，我发现如果你像这样调用cue/load函数两次，播放器会接受新的播放列表：https://jsfiddle.net/5yw2na96/

我通过将cuePlaylist() 函数链接到一个按钮发现了这个问题，并注意到您需要单击两次才能正确更新播放列表。空调用和实际调用之间似乎需要延迟，因此我将其设置为 500 毫秒。

【讨论】：

是的，就像我在示例中展示的那样，延迟调用该函数两次是一个不错的解决方法，直到它修复为止。

【解决方案3】：

我通过销毁播放器并使用我要加载的播放列表初始化一个新播放器来实施解决方法。

    embed.destroy();
    embed = new YT.Player('video-placeholder', {
        width: 600,
        height: 400,
        playerVars:
            {
                listType: 'playlist',
                list: playlistId,
                index: 0
            },
        events: {
            'onReady': function (event) {
                player = event.target;
            }
        }
    });

【讨论】：