RealEyes Media

Previously we introduced three media players built using the Open Source Media Framework (OSMF); the RealEyes OSMF Sample Player (REOPS), the Strobe Media Playback component, and the Flash Media Playback component.  All three of these players offer various degrees of customization, with REOPS and Strobe being the most flexible.  However, even though the Flash Media Playback component is a pre-built player hosted by Adobe, it still can be customized in several ways to fit your needs.  In this article we discuss what it takes to  skin the Flash Media Playback component with some custom bitmap images and an XML file that directs the player to those images.

Skinning the Player

First, you need to determine which elements of the player’s user interface you’d like to modify. As expected, certain visual elements in the player will have different appearances in different states-a play button, for example, will have  default, over, and down states, and you should consider this when creating your custom bitmap images.

Next, you’ll need to get the ID for the element that you wish to change. A comprehensive listing of the editable user interface elements along with their default sizes and descriptions can be found here. I’m choosing to modify the play button overlay, and the the IDs for this element and its states are as follows:

• playButtonOverlayNormal
• playButtonOverlayDown
• playButtonOverlayOver

I’ve created my own custom bitmap images that I’m going to use to replace the default play button overlay for each of its states.  Images to be used must be saved as either JPEG, GIF, or PNG.

From here you can choose between two methods for telling your player where to look for the image files. You can set a FlashVar skin variable in your page’s HTML code that contains the path to the image, or you can use an XML configuration file. I chose the latter, and my XML looks like this:

<skin>
<element id = "playButtonOverlayNormal" src = "http://www.realeyes.com/assets/PlayNormal.png"/>
<element id = "playButtonOverlayOver" src = "http://www.realeyes.com/assets/Play_Over.png"/>
<element id = "playButtonOverlayDown" src = "http://www.realeyes.com/assets/Play_Down.png"/>
</skin>

From here I simply uploaded my XML file and the three custom bitmap images to a webserver and into the same directory.  I then used the Flash Media Playback’s setup configurator page to automatically generate HTML code that directs my player to use these new images. In the configurator’s “advanced” section, I entered the URL for the XML file I uploaded where it asks for the “skinning file location” (not where you would enter a “configuration file location”).  Clicking on preview at this point should show you the player with your new skin applied. I copied the HTML that the setup page generated for me, and pasted it into this page-that’s it!

Flash Media Playback Component With Custom Play Button Overlay Applied

Share This