Playlist using different media players

hello! is it possible to do this?
have different players on a given page - youtube, vimeo, soundcloud, etc.
when the first player is finished playing whatever it is, then it can move to the next one and start playing.

obviously we are talking about players that have javascript apis available. what i’m thinking is:
have a “state” for when the player is playing (is it called an object?). run a loop that checks to see if the first item is playing, and when it’s finished it goes to the next item and plays it.

Do all of the api’s provide support for finding out when the video has finished?

here is youtube:

Returns the state of the player. Possible values are unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5).


onMediaEnd Fired when the track finished playing.
soundcloud.addEventListener('onMediaEnd', function(player, data) {
  console.log('track finished!');

and vimeo’s i can’t find but the two above are enough to start with.

This is called preparation. What will happen when someone plays a vimeo video. Do you just plan to to have it sit there at the end of playing? Do you plan that the user will be capable of moving on to the next? Do you plan to wait for a certain amount of time before automatically advancing to the next? Do you plan to not ever play vimeo videos until you can find out when they’re finished?

i found the script, but in the event that i couldn’t find it i would’ve probably gone in the direction of skipping it (ie that object wouldn’t enter the array). not ideal, but i know of another service that i’d like to use but it doesn’t offer a javascript api.

vimeo api


All events return the same data format, with differing data depending on the event. If an event has no specific data, like play, the data key will not be returned at all.

    "event": "eventName",
    "player_id": "player_id",
    "data": {}

The following events are available to listen to:

Fired automatically when the player is ready to accept commands. Do not try to add listeners or call functions before receiving this event.

When using the Flash Embed Code, the player will attempt to call vimeo_player_loaded(). You can change this using the js_ready flashvar. If a player_id has been set, it will be passed to that function as the first parameter.


Fired as the video is loading. Includes the percent loaded and the duration of the video. This also includes bytes loaded and bytes total in the Flash player. Note: the percent value differs between the Flash and HTML players. In Flash, it is the percentage of total bytes loaded, while in the HTML player, it is the percentage of the duration.

    {"percent":"0.326", "bytesLoaded":"32159909", "bytesTotal":"98650027", "duration":"365.507"}


Fired as the video is playing. Includes seconds, percentage played, and the total duration.

    {"seconds":"4.308", "percent":"0.012", "duration":"359.000"}

Fired when the video begins to play.
Fired when the video pauses.
Fires when the video playback reaches the end.