Question

我正在使用Youtube Player IFrame API处理某种Youtube远程Web应用程序，当我尝试使用内置播放列表系统作为应用程序的队列时，我遇到了问题。

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

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

但是没有诸如以下的功能：

player.addVideoToPlaylist('_9IBbMW2o_o')

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

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

Answer 1

通过获得一点创意，我们实际上可以使用loadPlaylist()而不会造成任何中断。 API提供events，其中一个会显示自己对我们的目的有用：onStateChange。

<强> onStateChange

只要玩家的状态发生变化，此事件就会触发。 API传递给事件侦听器函数的事件对象的data属性将指定与新播放器状态对应的整数。可能的值有：


-1（未启动）

0（已结束）

1（正在播放）

2（暂停）

3（缓冲）

5（视频提示）

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

我们的想法是维护一个单独的播放列表，我们可以操作。这是一个简单的Youtube视频标识符数组，我们可以随时按下新数据。

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

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

我们使用previous index + 1的原因是因为如果我们在播放最后一个视频时更新，则使用当前索引会返回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。

Answer 2

我找到了一个解决方案，您首先加载播放列表，然后从播放列表中获取所有视频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文档中找到任何内容，无法将独立视频添加到播放列表中。

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

2 个答案: