Custom Skins for Player Components

Applies to Roles
Publisher, Developer
Version
Brightcove 4
Modules
BEML
Edition
Pro, Enterprise

Using BEML, you can set custom skins for individual elements of player components. A skin is an image file that you create and host that you can use to change the appearance of some feature of a BEML player component. For example, you can use skins to style the background of the overall player, to change the default image that is used where a thumbnail is not available, or to change the look of the player's buttons. Using custom skins can give you fine-grained control over the appearance of your player templates.

Compare custom skins to the other approaches you have in customizing the look of a player:

Read Customizing Players with BEML for an overview of BEML and a list of related help topics.

Skins for player component elements

Each visible player component you define in a BEML player template can have multiple elements that you can style individually using custom skins. When you add a skin to an element like a button or a tab, the skin appears behind any icon or text in that element. For example, a TabBar includes the following skinnable elements:

  • the tabs
  • the background of the drop-down list
  • the background of each item in the drop-down list
  • the background of the up button in the drop-down list
  • the background of the down button in the drop-down list

The Custom Skin Component Reference lists all of the skinnable elements of the VideoPlayer, List, TileList, TabBar, ComboBox, MediaControls, and TextRegion components.

Custom Skin Example

Let's look at an example of what you can do with custom skins. Here's the player we start with, which uses a template similar to the Widescreen with Horizontal List template:

Player, before skinning

And here's the same player template, after we apply skins to several of the components:

We've customized the player by adding custom skins to the playhead well, the thumbnails, the paging buttons, and the player chrome. This .zip file includes all the .png image files we used in the custom skins. See Custom Skin Player Example for a more detailed look at how we customized this player.

Creating Custom Skins for Components

To use custom skins, you need first to create the image files for the skins. You should consider using .png files for your skins, since they permit you to set the transparency of the skin. Because the images will stretch to fit the element's space, having the option for transparency is a big plus. This way, the .png can be the correct size, but the graphic inside it can be smaller. This also allows you to make elements translucent, like the chrome in the sample skinned player above.

The size of the skin is determined by the BEML definition of its player component. For example, if the thumbnail is set to 120x90 in a List component, the thumbnail overlay skin should be 120x90 to avoid stretching.

You can download a .zip file that includes image (.png) and Photoshop template (.psd) files for skins for each of the player component elements that accept a skin. These sample and template files can help you create your own skin image files and figure out appropriate sizes for your skins.

Applying a Custom Skin to a Component Using BEML

Once you've created a custom skin, you can add it to a component in your BEML custom player template. Every skinnable element of a BEML component has a key name. The key names are listed in the Custom Skins Component Reference. You add a custom skin to a BEML component by  mapping the key name for the element of your component to the URL at which you are hosting the skin image file. You can accomplish this in two ways:

Setting a Skin within an Individual Component's Element

You can set a custom skin for a feature of a component by using the style attribute for the component within the BEML element that defines the component instance. For example, you can set custom skins for buttons and items in a ComboBox like this:

<ComboBox style="button-skin:http://server/skin1.jpg;item-skin:http://server/skin2.jpg" />

Note how you can include multiple properties and separate them with a semicolon.

Setting Skins in the Theme and Style Elements

You can set skins for all components in the player template by using the Style element within the player template's Theme element. To set a style using the Theme or Style tags in the BEML, the form would be (using the same keys as the above example):

<Theme name="Deluxe" style="Light">
   <Style class="ComboBox">
     <![CDATA[
.button {
  skin:http://server/skin1.jpg;
}
.item {
  skin:http://server/skin2.jpg;
}
     ]]>
   </Style>
</Theme>

Note that each selector is preceded by a period (.button). The selector is what precedes the hyphen in the key, and the property is what follows. So button-skin:value becomes .button { skin:value; }.

When you assign skins using a Theme or Style tag, you cannot repeat a selector, as in the following:

//WRONG!!
.playheadWell {
  unloadedSkin:http://server/skin1.jpg;
}
.playheadWell {
  bufferedSkin:http://server/skin2.jpg;
}
.playheadWell {
  watchedSkin:http://server/skin3.jpg;
}

These instead need to be combined using a single selector:

.playheadWell {
  unloadedSkin:http://server/skin1.jpg;
  bufferedSkin:http://server/skin2.jpg;
  watchedSkin:http://server/skin3.jpg;
}

Changing Button Icons

You can't use either of these custom skin approaches to change the icon or text displayed on a button, although you can change the button's background. To change the icon or text of a button, use the button's iconName attribute (for Button or ToggleButton components) or the toggledIconName attribute (for ToggleButton components). You can set the iconName to one of the standard icons (menu, play, pause, volume, maximize, minimize, share, link, code) or to the path of an image file that you host.

Notes and Limitations

Here are some particular things to be aware of in creating custom skins for different BEML components:

  • Custom skins you create are not displayed when the player is fullscreen mode, except for the background of the video itself.
  • Some BEML components have a showBack attribute, which controls whether the background of the graphic should be shown. Custom skins will not be visible if the component has showBack="false".
  • The menu screens currently cannot be reskinned.
  • If you add a skin to an element with different states, you lose the ability to show separate rollover, down, and inactive states of that element. However, many of the elements that are skinnable still have icons that reflect these states.

 

 

Tags
design, skins