javascript - 如何使用 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 是我的嵌入式播放器，由 iFrameAPI 返回
• playlist 是包含视频 ID 的数组
• nextId() 是一个提供视频 ID 的函数另一个(来自播放列表)

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

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() 调用手动获取玩家的状态。这可能不是最理想的，但绝对有效。