Remote Playlists using the OSM Player PHP Library

Before you read this article, it is important that you first take a look at the prerequisites

• Using the Open Standard Media Player PHP Library.

IMPORTANT NOTE: This functionality has been fixed for all OSM Player versions greater than 0.9. If you are using this version, then please download the latest development snapshot or a later version to test this out.

Another great feature about the Open Standard Media Player, is that it allows a separation between the playlist and the main player. This feature allows for the playlist to be placed on any other section of the website and still communicate to the main player as if they were still connected as one player. This is commonly referred to as Remote Playlist and can be very useful if you wish to place the playlist within a side block region, and then communicate to a central player on the page. The user can then watch videos without any need for any page refresh on the page.

Creating the playlist and player.

In order to utilize this feature, we will need to create two different players at the top of our page, one for the playlist, and the other for the player. Also, in order to distinguish between the two, we will need to provide an id for both the player and playlist. We can add this id as a parameter when we create both players. We cannot forget this id, since it will be used later to connect the two together.

Connecting them together

After we have the two players created, our next task is to connect them together. We can do this by simply using the addPlaylistTo method on the $playlist object, where we can add that playlist to another player. In our case, we will add it to the $player object. This looks like the following.

Adding both players to the page.

Since we now have two separate players, we can easily add them to two separate sections of your HTML webpage. Since they are now connected together, they will communicate together as if they were a single media player. One thing to note here, is that we need to add the header of one player, and then add the CSS header of the other player since the only thing different between the two is the CSS inclusion. The final code for this example looks like the following.