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

i'm working on kind of youtube remote web application using youtube player iframe api , got stuck when tried use built-in playlist system queue application.

using api, able load specific list of videos playlist e.g.:

player.loadplaylist({playlist: ['_9ibbmw2o_o']})` 

but there no function such as:

player.addvideotoplaylist('_9ibbmw2o_o') 

what i'm trying adding video without stopping or reloading current playlist.

is there workaround or missing something?

by getting little creative, can use loadplaylist() without causing interruption. api provides events, 1 of reveal useful our purpose: onstatechange.

onstatechange

this event fires whenever player's state changes. data property of event object api passes event listener function specify integer corresponds new player state. possible values are:

• -1 (unstarted)
• 0 (ended)
• 1 (playing)
• 2 (paused)
• 3 (buffering)
• 5 (video cued)

some observation shows -1 event fires when playlist transitions 1 video another. our opportunity. updating playlist when transition happen, there no (well, barely) noticeable interruption.

the idea maintain separate playlist, can manipulate. it's simple array of youtube videos identifiers, in can push new data whenever want.

everytime video transition happens, check length of our playlist against length of player's playlist. if no match, update player's playlist.

we keep track of index, within player's playlist, of last video played before transition. when loading new playlist, provide previous index + 1, play next video in playlist rather start beginning.

the reason use previous index + 1 because using current index return 0 if updated while playing last video, since player loop first video.

i must point out designed purely case of appending new videos playlist. editing playlist in other ways require more logic.

the working demo on 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) {                    /*                 video has changed                 seize opportunity update playlist without interruption                 */                 if(event.data == -1 || event.data == 0) {                      // current video index                     var index = player.getplaylistindex();                      // update when playlists not match                     if(player.getplaylist().length != playlist.length) {                          // update playlist , start playing @ proper index                         player.loadplaylist(playlist, previousindex+1);                     }                      /*                     keep track of last index got                     if videos added while last playlist item playing,                     next index 0 , skip new videos                     make sure play proper video, use "last index + 1"                     */                     previousindex = index;                 }             }         }     }); });  $(document).ready(function() {        $('#button').click(function(){         playlist.push('zveael7nmwm');         playlist.push('yrbwxhowb6i');     }); }); 

note if block youtube.com/api/stats (adblock, etc), event 0 not fired @ end of video.