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

到目前为止，我已经嵌入了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
另一个（来自playlist）


在上一个视频结束后，是否有任何方法可以加载和播放视频？

最佳答案

所以实际上有两个问题。一个是当我像这样指定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”上下文的含义（这是一个愚蠢的错误，但是我是Java语言的新手，请原谅。）

但是即使如此，由于某些原因，传递给onPlayerStateChange的参数仍未定义。那将是描述播放器当前状态的数据。因此，即使在播放器更改状态时回调被分派得很好，但实际状态仍未正确传递给函数。
所以我要做的是：

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

我不再依赖参数，而是通过getPlayerState()调用手动获取播放器的状态。这可能不是最佳选择，但绝对可以。

关于javascript - 如何使用YouTube js API在同一个嵌入式播放器中播放多个视频？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29242332/