将多个 youtube 视频嵌入到无铬播放器提示

Question

所以在我一直从事的项目中，我使用 youtube API 将视频添加到无铬播放器（有自定义按钮，一切正常，没有问题）。

它加载从数据库（Codeigniter、PHP）获取的 youtube id。 但我想看到的是：id 不是加载 1 个视频，而是希望将我从数据库中获得的所有视频添加到那个播放器的提示中。

所以只有一个屏幕，从 dbase 检索的第一个视频首先播放，当它完成第二个加载时最好也循环播放。有什么办法可以做到这一点？

我的第一个猜测是将带有 youtube id 的数组保存在某处并在状态更改时（当“视频停止”事件被触发时）从数组中加载下一个 id。还没有尝试过这个，因为 id 更喜欢如果提示只是在初始化时被填充，所以它不必在视频结束后加载。这可能吗？

Answer 1

首先，您必须使用 Youtube API version 2 来激活新的 statechange 功能。

这是给你的代码：

var video_list = [
    '21OH0wlkfbc',
    'InZNBcJTmWs',
    'iIzqYiRo01E',
    'ZYmADPVEqU4'
];
var video_current = 0;

function onYouTubePlayerReady( ) {
    var o = document.getElementById( 'ytplayer2_object' );
    if( o ) {
        o.addEventListener( "onStateChange", "ytplayer_statechange" );
    }
}
function ytplayer_statechange( state ) {
    // 0 => video ended
    if ( state == 0 ) {
        video_current++;
        video_current %= video_list.length;
        ytplayer_loadvideo(video_list[ video_current ]);
    }
}