如何使用 YouTube js API 在同一个嵌入式播放器中连续播放多个视频？

Question

到目前为止，我已经嵌入了一个 YouTube 播放器，我可以通过 YouTube 对其进行控制 API，而且我还正确地获得了回调和所有内容。

因此，每当我在我的播放器对象上调用 loadVideoById 以加载另一个视频时，当前视频仍在播放，它工作正常。但是，如果我在视频停止后调用它，它不会执行任何操作。

我有一组预定义的 YouTube 视频 ID，我希望在同一个嵌入式播放器中一个接一个地播放。所以我想要的是，一旦一个视频停止播放，API 就会发出回调，这样我就会收到通知，然后我命令播放器加载另一个视频并播放。这是代码的相关部分：

this.playNextVideo = function playNextVideo() {
    if (this.playlist.length > 0) {
        yt_embedded_player.loadVideoById(this.nextId(), 0);
        yt_embedded_player.playVideo();
    }
}

this.onPlayerStateChange = function onPlayerStateChange(_event) {
    if (_event.data == YT.PlayerState.ENDED) this.playNextVideo();
}

yt_embedded_player 是我的嵌入式播放器，由 iFrame 返回 API
playlist 是包含视频 ID 的数组
nextId() 是一个提供视频 ID 的函数另一个（来自 playlist）

有什么方法可以在上一个视频播放完后加载播放？

Answer 1

所以实际上有两个问题。一个是当我像这样向 YouTube API 指定回调函数时：

yt_embedded_player = new YT.Player(this.e_id, {
    height: this.player_h,
    width: this.player_w,
    videoId: /* default video id */,
    events: {
        'onReady': this.onPlayerReady.bind(this),
        'onStateChange': this.onPlayerStateChange.bind(this)
    }
});

我不得不使用 .bind(this)（如您所见）为这些函数中的 "this" 上下文赋予意义（这是一个愚蠢的错误，但我是 javascript，不好意思。

但即便如此，传递给 onPlayerStateChange 的参数由于某种原因仍未定义。那将是描述玩家当前状态的数据。因此，即使当玩家改变状态时回调被调度得很好，但实际状态没有正确传递给函数。所以我所做的是：

this.onPlayerStateChange = function(_event) {
    if (yt_embedded_player.getPlayerState() == YT.PlayerState.ENDED) {
        this.playNextVideo();
    }
}

我没有依赖参数，而是通过 getPlayerState() 调用手动获取玩家的状态。这可能不是最理想的，但绝对有效。

如何使用 YouTube js API 在同一个嵌入式播放器中连续播放多个视频？

How to play multiple videos back to back in the same embedded player with the YouTube js API?

javascript

youtube-javascript-api