Custom Skin Player Example

In the introductory topic about Custom Skins for Player Components, we showed you an example player customized with custom skins. In this topic, let's take a closer look at how the player was customized. Here's the before and after shot:

The 'before' player uses a player template that is similar to the Widescreen with Horizontal List template. To create the 'after' player, we've added custom skins to the following player components:

• VideoPlayer (playerChrome, playhead, playhead well)
• TileList (thumbnail-skin, thumbnail-overlaySkin, pagingButtons-skin, pagingButtons-backSkin)

You can download a .zip file that includes all the .png files we used for these skins. You can also download the complete BEML player template for the skinned player.

VideoPlayer elements

playerChrome

This is the background for the player controls, which displays behind the player control buttons:

Because this background chrome is so much darker than the Light style used in the standard template, we need to lighten up the button texts, so that they will show up against the dark background. To do this, we open up the player in the Styles editor of the Publishing module. In the VideoPlayer: Buttons section, we set the Text and Icons colors to white and the Rollover Text and Rollover Icons colors to aqua, to match our underwater color scheme. We similarly adjust the colors of the Time and Volume Control elements.

We also added an underwater background image to match the underwater subject matter of the videos:

In the player template, this BEML code represents the playerChrome within the VideoPlayer's Style tag:

<Theme name="Deluxe" style="Light">
  <Style class="VideoPlayer"><![CDATA[
.playerChrome {
    skin:http://hostname/filename-playerChrome-skin.png;
    }
...

playhead and playhead well

The playhead and playhead well shows the video's progress in playing back (and, for progressive download videos, for buffering). The playhead also enables the viewer to scrub forward and backward in the video's playback. In this example, the playhead elements are part of the VideoPlayer component; in other player templates, the playhead might be a part of a separate MediaControls component. We change the colors of the playhead elements to match our color scheme. The playhead includes the following elements:

playhead-skin

We replace the standard playhead with a friendly dot. We pick a color that goes with our underwater theme:

playheadWell-unloadedSkin

The unloadedSkin element of the playheadWell represents the portion of the playhead that has not been buffered on a progressive download video.

playheadWell-bufferedSkin

The bufferedSkin element of the playheadWell represents the portion of the playhead that has been buffered on a progressive download video or the skin of the whole unwatched portion of the playhead on a streaming video.

playheadWell-watchedSkin

The watchedSkin element of the playheadWell represents the portion of the playhead that the viewer has already seen and which is to the left of the playhead.

This BEML code presents the playhead elements within the VideoPlayer's Style tag:

<Theme name="Deluxe" style="Light">
  <Style class="VideoPlayer"><![CDATA[
...
.playhead {
    skin:http://hostname/filename-playhead-Skin.png;
    }
.playheadWell {
    unloadedSkin:http://hostname/filename-playheadWell-unloadedSkin.png;
    bufferedSkin:http://hostname/filename-playheadWell-bufferedSkin.png;
    watchedSkin:http://hostname/filename-playheadWell-watchedSkin.png;
    }
     ]]></Style>

 TileList elements

In our example player, we include a TileList component, which presents thumbnails of all the videos in the playlist and buttons that let the viewer scroll left and right through the playlist. The TileList component is customized with skins on the following elements:

thumbnail-skin

The thumbnail-skin appears behind the thumbnail image for each of the videos in the playlist. This skin is slightly larger than the standard thumbnail size, so it creates a border around each thumbnail. The entire thumbnail-skin would be visible if a video in the playlist had no thumbnail assigned to it.

thumbnail-overlaySkin

The thumbnail-overlaySkin appears over all thumbnails in the list. In our example, the 'play' icon indicates that the viewer can launch a video by clicking the thumbnail.

pagingButtons-skin

This is the background that appears behind the forward > and back < icons on the paging buttons. We use a square button, instead of the round one in the standard template, and use a color that's consistent with the color scheme we're implementing.

pagingButtons-backSkin

The back skin appears only when the paging button is rolled over. We add a dark rectangular background to replace the white oval of the standard template.

This BEML code represents the thumbnail and pagingButtons elements within the TileList's Style tag:

<Style class="TileList"><![CDATA[
.thumbnail {
          skin:http://http://hostname/filename-thumbnail-skin.png;
          overlaySkin:http://http://hostname/filename-thumbnail-overlaySkin.png;
        }
.pagingButtons {
          skin:http://http://hostname/filename-pagingButtons-skin.png;
          backSkin:http://http://hostname/filename-pagingButtons-backSkin.png;
        }
     ]]></Style>