Question

I am creating a video player which relies on loading both the vimeo and youtube playlist apis through ajax. Once they are loaded, for youtube I then need to loop through all the videos in the playlist and call the data api for each video to get its modified date. Once all vimeo videos are loaded and all youtube videos are loaded and have their creation dates, I need to sort them using jquery.

I’m looking for the best way to detect when these processes have been done, and the problem is I can’t really start the sort until both the vimeo functions and the youtube functions have been completed. The best thing I could come up with was to run a setInterval function which checks on the status of two boolean flags – for example:

var youtubeReady = false, vimeoReady = false;
var videoStatusInterval = setInterval("checkVideoStatus",1000);

function checkVideoStatus(){
  if (youtubeReady === true && vimeoReady === true){
    sortVideos();
  }
}

The problem is that this would run only periodically (every second in the example) – and it seems like there should be a way to do this instantaneously once both conditions are met. Anyone have any ideas?

Answer 1

I am not familiar with Youtube’s API nor Vimeo, but maybe they have a ‘ready’, ‘done’ or ‘loaded’ event that you can listen two, then, in the handler that you set, you set the two flags, so that, if both are true, then you execute, something like this:

    //Let's createa a couple of custome events to simulate the real ones, comming from Youtube and Vimeo.
var youtube = document.createEvent('Event'),
    vimeo  = document.createEvent('Event');

youtube.initEvent('youtubeReady');
vimeo.initEvent('vimeoReady');

/*
* This function will be use to run YOUR code, ONCE BOTH events are triggered.
* As said, functions are objects so, as any object in JS, you can add fields at any time you want.
* Check this page in Mozilla's Developer Network for more detail:  http://goo.gl/Pdvpk */
function sourcesReady(){
  if(sourcesReady.youtube && sourcesReady.vimeo){
        alert('Both sources ready!');
  }
  else if(sourcesReady.youtube){ 
    alert('Only Youtube ready!');
  }
  else if(sourcesReady.vimeo){ 
    alert('Only Vimeo ready!');
  }
}

//Let's set a couple of event handlers for the 'ready' events, these handlers will set the flags that we need.
document.addEventListener('youtubeReady', function youtubeReadyHandler(){
  sourcesReady.youtube = true; //We set/create the field in the function, that is, the function ITSELF has the field, not the 'this'.
  sourcesReady(); //We call it to evaluate the condition.
}, true);

document.addEventListener('vimeoReady', function vimeoReadyHandler(){
  sourcesReady.vimeo = true; //same as before.
  sourcesReady(); //We call it to evaluate the condition.
}, true);

document.dispatchEvent(youtube);
document.dispatchEvent(vimeo);

Hope this suggestion helps. =)