Custom Player Themes

Custom themes give you fine-grained control over the appearance of your video player templates. Using BEML and custom SWF files you create in Flash, you can control the look and feel of nearly every part of our players. For example, you can customize the player icon set, change button states, and even tweak the opacity of player elements. While this feature requires access to Flash, you don't need hardcore Flash developer skills. This document will walk you through the basics of how to create and apply custom themes.

Player example

Here is an example of what you can do with custom themes:

Chromeless Player Before

This is a version of our Chromeless video player using our default 'Deluxe' theme.

Chromeless Player After

We've customized nearly every part of this video player using a single custom theme SWF. Download the source for the file we used and take a closer look. You can also download the BEML player template for this player.

With this one file we were able to:

• Hide the button backgrounds
• Change the play/pause icons to text
• Swap share, minimize, and volume icons for larger versions
• Change the up, over, down, and disabled states for each icon
• Change the style of the playhead and playhead background
• Update the volume control to match the new playhead elements
• Changed the plus/minus icons in the volume control

To learn more about customizing the layout of our chromeless player controls, click here.

How to create a custom theme

1. Download the .zip file that includes Flash files (.fla) for every Video Cloud player component.
2. Open the .fla file for the component you'd like to edit. In this example we will be using ChromelessVideoPlayer.fla. Note that when you open the Flash file, the stage will be empty.
3. Select an element in the library and double click to open it on the stage. Do not change the names or export linkages of the library elements or the names of frames or symbol instances, otherwise the player will not recognize them. In this example we will be using the CVPButtonSkin skin:
   
4. Make desired changes to the selected element. In this example, I changed the color of the button skin, removed the border, and removed the rounded corners. Note that if the shape you draw is larger or smaller than is specified in the BEML, it will resize.
   
   This is how the above changes look when applied to the Chromeless player:
   
   Elements should always be positioned at X=0, Y=0 to make sure that positioning is correct within the player. You can edit the X and Y coordinates in the properties panel in Flash:
   
5. If you are editing a skin that has multiple states (for example, button skins, icon skins, etc.) make sure to edit all 4 states on the timeline:
   
   Position the scale 9 lines to tell the shape how to scale. For example, if you are using rounded corners, you want to make sure the scale 9 lines are not cutting the rounded edge, otherwise it will not resize correctly. In the example below, the positioning of the scale 9 lines will cause the corners to not scale evenly:
   
6. Once you have made all desired changes, export a SWF. In most cases, you should export the themes from multiple components into one SWF, so the player will only have to load one external file on player load.

How to apply a custom theme

Once you have created your custom theme and exported it as a SWF, you need to add it to a custom player template, using BEML:

1. Host the theme SWF on your server.
2. In the BEML, add a theme attribute that points to the desired component. You can apply custom themes to these components:
   
   • VideoPlayer
   • ChromelessVideoPlayer
   • VideoDisplay
   • List
   • TileList
   • ComboBox
   • TabBar
   • MediaControls
   • TextRegion
   For example:

   <ChromelessVideoPlayer id="videoPlayer" 
        theme="http://fungus.example.com/ChromelessVideoPlayerTheme.swf"> 

Bear in mind the Flash security constraints that limit a player's ability to interact with other domains. The domain that hosts your custom theme SWF file needs to include <allow-access-from domain="admin.brightcove.com" /> in its crossdomain.xml file.

Notes and limitations

• You cannot currently apply custom themes to Video Cloud player menu screens (Info, Get Link, Embed, etc). If you want to customize a menu (including changes to text fonts or sizes), consider creating a custom component that overlays the menu, importing it into your player template with a SWFLoader element.
• Themes include the ability to have up, over, down, and disabled states, but you cannot have an animation between these states.
• Some BEML components have a showBack attribute, which controls whether the background of the graphic should be shown. Custom themes will not be visible if the component has showBack="false".

Other ways to style player templates

In addition to custom themes in BEML, Video Cloud gives you many other choices about how to style individual players or player templates:

Style editor in the Video Cloud Studio Publishing module

• Change the overall look of the player by setting a default theme
• Change the individual colors of component elements
• Add or modify images

BEML

• Using the style element, you can apply CSS to a BEML component
• Set a theme for a player template using the BEML theme element

Custom component skins

• Custom component skins are similar to custom themes, but are ideal if you are only skinning a few player elements or if you don't have access to Flash.