使用 Youtube Player IFrame 添加视频到播放列表 API

Question

我正在使用 Youtube Player IFrame API 开发某种 Youtube 远程 Web 应用程序，当我尝试使用内置播放列表系统作为应用程序的队列时卡住了。

使用 API，您可以加载特定的视频列表作为播放列表，例如：

player.loadPlaylist({playlist: ['_9IBbMW2o_o']})`

但是没有功能如：

player.addVideoToPlaylist('_9IBbMW2o_o')

我想做的是在不停止或重新加载当前播放列表的情况下添加视频。

是否有解决方法或者我遗漏了什么？

Answer 1

我想出了一个解决方案，首先加载播放列表，然后从播放列表中获取所有视频 ID，并将任何新视频添加到全新的播放列表中。

var playlist = player.getPlaylist();
var newPlaylist = [];
for (var i = 0; i < playlist.length; i++) {
    newPlaylist.push(playlist[i]);
}
newPlaylist.push('M7lc1UVf-VE');
player.loadPlaylist({playlist: newPlaylist});

这是一个jsfiddle example

我无法在 Youtube 的 IFrame API 文档中找到任何可将独立视频添加到播放列表的内容。

Answer 2

稍加创意，我们就可以实际使用 loadPlaylist() without causing any interruption. The API provides events, one of which will reveal itself to be useful to our purpose: onStateChange。

onStateChange

This event fires whenever the player's state changes. The data property of the event object that the API passes to your event listener function will specify an integer that corresponds to the new player state. Possible values are:

-1 (unstarted)

0 (ended)

1 (playing)

2 (paused)

3 (buffering)

5 (video cued)

一些观察表明，当播放列表从一个视频转换到另一个视频时，-1 事件会触发。这是我们的机会。通过仅在发生转换时更新播放列表，没有（好吧，几乎没有）明显的中断。

我们的想法是维护一个单独的播放列表，我们可以对其进行操作。这是一个简单的 Youtube 视频标识符数组，我们可以随时在其中推送新数据。

每次发生视频转换时，我们都会根据播放器播放列表的长度检查播放列表的长度。如果他们不匹配，我们会更新玩家的播放列表。

我们还在播放器的播放列表中跟踪过渡前播放的最后一个视频的索引。加载新的播放列表时，我们提供 previous index + 1 来播放播放列表中的下一个视频，而不是从头开始播放。

我们使用 previous index + 1 的原因是因为如果我们在播放最后一个视频时更新，使用当前索引会 return 0，因为播放器会循环回到第一个视频.

我必须指出这纯粹是为了将新视频附加到播放列表的情况而设计的。以其他方式编辑播放列表需要更多逻辑。

JSFiddle 上的工作演示。

HTML

<div id="player"></div>
<button id="button">queue 2 more videos</button>

CSS

div {
    width:300px;
    height:240px;
    background-color: yellow;
}

JavaScript

var player;
var playlist = ['b_XKnkQZkOM','dnNt78eGjSM'];
var previousIndex = 0;

$(window).load(function(){
    
    player = new YT.Player('player', {
        height: '240',
        width: '300',
        playerVars : {
            playlist: playlist.join(','),
        },
        events: {
            onStateChange: function(event) {  
        
                /*
                the video has changed
                seize the opportunity to update the playlist without interruption
                */
                if(event.data == -1 || event.data == 0) {
                    
                    // get current video index
                    var index = player.getPlaylistIndex();
                    
                    // update when playlists do not match
                    if(player.getPlaylist().length != playlist.length) {
                        
                        // update playlist and start playing at the proper index
                        player.loadPlaylist(playlist, previousIndex+1);
                    }
                    
                    /*
                    keep track of the last index we got
                    if videos are added while the last playlist item is playing,
                    the next index will be zero and skip the new videos
                    to make sure we play the proper video, we use "last index + 1"
                    */
                    previousIndex = index;
                }
            }
        }
    });
});

$(document).ready(function() {   
    $('#button').click(function(){
        playlist.push('ZVeaEl7nMWM');
        playlist.push('YRBwXHowb6I');
    });
});

请注意，如果您阻止 youtube.com/api/stats（Adblock 等），事件 0 不会在视频结束时触发。

使用 Youtube Player IFrame 添加视频到播放列表 API

Adding a video to a playlist using the Youtube Player IFrame API

javascript

youtube-iframe-api