This tutorial will walk you through how to set up the Remote Playlist Feature. The remote playlist feature uses JavaScript to serve as a communication gateway between two different SWF objects on the page at any given time. If you are using Drupal, you will need to upgrade to the latest version of the Dash Player module by going to http://www.drupal.org/project/dashplayer. Once you have upgraded, you will then notice that there is a new JavaScript file that is included with this module called dashPlayer.js. This is the file that is used as the communication gateway between any two SWF objects on the page. The good news is that is ALL you need to know. The second you use the Dash Player API to insert an object onto the page, the dashplayer module will add the dashPlayer.js file for you. All you have to do now is understand HOW to make the connections.
Surprisingly, implementing this remote playlist feature is very simple. You basically just need to give your Playlist an id, your Player an id, and then use the connect parameter to connect both of them together. This is done with two new parameters called id and connect. You also need to indicate to the Dash Media Player that you are using a Playlist or a Player. This is done with two more parameters, playlistonly if you just want it to show the playlist, and disableplaylist on the player to say you do not want to show the playlist (since the playlist is actally somewhere else on the page. Let me give an example to illustrate...
Let us suppose that you wish to have your player in the main section of the page, and then have your playlist in a Block to the side of this main player (exactly like how I did in my showcase at http://www.tmtdigital.com/remoteplaylist). So, let me walk you though step by step how to achieve this setup. Before I begin, though, I am assuming that you have an understanding on how to set up a view and link the Dash Media Player to that view in Drupal using the playlist argument. Let's get started.
- First, we will need to setup up our system to take video uploads, and then make a view for those videos called videos. If you need help with this step, then I suggest you start at http://www.tmtdigital.com/node/44 and come here when you are done.
- Now that you have a view ready to show your videos in the Dash Media Player, lets first create our page that will only show the video (and not the playlist). You do this by clicking on Create Content >> Page
- Give this page a title... like Remote Playlist Test, and then in the body, you will paste the following... I will explain what this does in a minute.
<div style="text-align:center">
<?php
$params['id'] = 'dashvideo';
$params['connect'] = 'dashplaylist';
$params['width'] = 550;
$params['height'] = 420;
$params['disableplaylist'] = 'true';
print dashplayer_get_player($params);
?>
</div>
Make sure you select PHP Code in the Input Format before you submit.
- Basically what you are doing here is defining a player with an id of dashvideo, and you are telling that player to connect to another player with an id of dashplaylist (which we haven't made yet). Since this is just the player, we don't really need to put the playlist parameter here since we will be doing that from the actual playlist. You are now ready to save this node. Once it is saved, Take note of the node ID that it just created by looking at the URL, where it says "node/{nodeid}". You will need to remember this later.
- Now, lets go and create our block that will hold our playlist. You do this by going to Administer >> Blocks
- Once you are there, you will need to add a new block by clicking on the link at the top that says Add Block
- The block description can be anything really, but we will just use Remote Playlist
- Then in the Block Body you will want to now create the code for the playlist. Just copy and paste the following and I will explain later...
<div style="text-align:center;">
<?php
$params['id'] = 'dashplaylist';
$params['connect'] = 'dashvideo';
$params['width'] = 200;
$params['height'] = 520;
$params['playlist'] = 'videos';
$params['playlistonly'] = 'true';
print dashplayer_get_player($params);
?>
</div>
Make sure you select PHP Code in the Imput Format before you submit.
- Basically what we are doing here is now creating the playlist with an id of dashplaylist and it is now connecting to a player called dashvideo. Do you see how this works now? Pretty simple, huh? All we are doing here is establishing the connection needed for these two players to communicate. You are now ready to save the block.
- Now that the block has been saved, we will need to make it show up for the page that we just created to hold the player. Remember the node ID that I told you to remember? That is where this will come in handy. Let's go ahead and find the block we just created in the Block list and then click on the configure link next to it.
- This will take you to the more detailed block configuration page that lets you specify WHERE you would like to see this block. This can be done in the section called Page specific visibility settings. Go ahead and expand this section.
- Now, where it says Pages: you will want to enter the following... node/{nodeid} where you will replace the {nodeid} with the node Id of the page that you created at the beginning of this tutorial. When you have done that, press the Submit button.
- You are now ready to add this block to the visible blocks list. You can do this by finding your block in the block list again, and then in the drop down box next to that block, you will then select right sidebar.... or left sidebar depeding on where you want the playlist. Then go down to the very bottom and press the Save Blocks button.
- And now go back to your original page and check out what you see... Remote Playlists!!!