Playlist using different media players

JavaScript
1

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.

2

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

3

here is youtube:

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

soundcloud:

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.

4

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?

5

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

Events

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:

ready
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.

loadProgress

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"}

playProgress

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

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

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