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在同一嵌入式播放器中背靠背播放多个视频？

1 个答案: