Question

So in the project ive been working on i use the youtube API to add a video to a chromeless player (got custom buttons, everything works no problems).

It loads the youtube id which it gets from the database (Codeigniter, PHP).
But what i would like to see is: instead of loading 1 video, id like to add all the videos i get from the database in the cue of that one player.

So only one screen, first video retrieved from dbase gets played first, when its done second get loaded preferably also looped. Is there any way i can achieve this?

My first guess would be to save the array with youtube id’s somewhere and on state change (when the ‘video stop’-event gets fired) load the next id from the array. Havent tried this yet because id prefer if the cue gets just gets filled on the init, so it doesnt have to load after a video has been ended. Is This possible?

Answer 1

First, you must use Youtube API version 2 to activate newly statechange function.

This is the code for you:

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 ]);
    }
}