Creating a custom OSM Player template

Not only does the Open Standard Media Player come equipped with the ability to change the theme using the ThemeRoller system, but it also allows you to completely change the layout and behavior using the OSM template system. The template system is surprisingly powerful, and allows you to completely modify not only the layout of your custom media player, but also to completely customize how the player behaves using a unique jQuery hook system within the template javascript file. In this tutorial, I will cover the basics of setting up a new OSM Player template which should then act as an enabler for anyone to completely create their own user experience out of their media player.

Creating the custom OSM Player template files

The first step to creating a custom template it to first create the files that will be used in your template. This can be accomplished by following the following steps.

Step 1: Copy the "default" directory to your own custom directory

In this step, simply copy the entire templates/default directory into a new directory named whatever you would like to call your new template. For this example, we will just call our new template custom. So, when we are done with this step, we should have a copy of the templates/default called templates/custom.

Step 2: Rename the template and javascript files.

Once we have our new folder created, the next step is to rename all of the *.tpl.php, *.css, and *.js files so that they reflect the new template name. For our example, we will rename all of the files to the following names.

• jquery.media.template.custom.compressed.js
• jquery.media.template.custom.js
• osmplayer_custom.css
• osmplayer_custom_ie.css
• osmplayer_custom.tpl.php
• osmplayer_custom_controlbar.tpl.php
• osmplayer_custom_hscrollbar.tpl.php
• osmplayer_custom_links.tpl.php
• osmplayer_custom_menu.tpl.php
• ....
• .... ( hopefully you get the picture. Just do the rest of the files in your template folder the same way ).

Step 3: Change the "default" template name in the *.js files.

The last step to setting up your custom template is to open up the jquery.media.template.custom.js and the jquery.media.template.custom.compressed.js, and change the single "default" string at the beginning of each file to reflect your new template name. To assist you in this step, here are the exact changes that were made to the *.js files for our example custom template.

jquery.media.template.custom.js

Using the new template with the OSM Player PHP Library

At this point, you can now completely change and customize anything within the template and not worry about overwriting your changes when you upgrade the player. You can then reference your new template when you create the OSMPlayer object using the following code.

Using the new template within a Content Management System

If you are using the OSM Player within a Content Management System ( like Drupal ), you should now be able to select your new template within the preset settings for your player. Then make sure you save your preset, and you will now be using your new custom template!