Skinning the Player

Introduction

Thanks to Bitmovin-Player’s V7 new skinning features, it is now possible to completely customize the player’s appearance. All visual elements are accessible and configurable in terms of color, font size .etc. In addition to that, including some custom icons is also possible. Since the V7, Bitmovin-Player’s appearance is configurable directly through CSS files.

Skin integration

To be applied, the CSS file has to be hosted on your web server and imported into the webpage.

<link rel="stylesheet" type="text/css" href="//yoursite.com/yourstyles/myskin.css"></link>

This file can be used to override the default player’s CSS classes

For users who want to use more than one skin during a customer session, the UI manager can be used once again. Prior being used, the UI manager has to be released.

      uiManager.release();
      uiManager = bitmovin.playerui.UIManager.Factory[factoryMethod](player, uiConfig);

For instance, this method can be used in order to apply a certain skin only during the advertisement phase(s) and another when the content is playing.

Creating some custom skins :

Using some existing skins is possible as well as customizing existing files or creating newskins from scratch. A skin is defined by a class containing several different ID. Each single ID corresponds to one of the player’s graphical elements or class of elements.

Example :

Let’s define a class that changes the size and colors of the message displayed while an advertisement is playing.

.ui-skin-modern .ui-label-ad-message {
    text-align: center;
    width: 150%;
    color:  #f44259 }

For advanced skinning customization, we recommend to use the player’s default skin and to change elements properties. More information on all available styling options and CSS classes can be found in our documentation.

With CSS, it is possible to enjoy the benefit of class inheritance: For instance if every single element of your skin has to have the same color property, it is possible to define it once for all the class. In the example below, the skin is called ui-skin-modern and we want to use the white (#fff) as a base color.

.ui-skin-modern {
  color: #fff;
}

In the next example, the target is to hide every container-wrapper‘s direct child with class hidden. This use-case can be handled the following way :

.ui-skin-modern .container-wrapper > *.hidden {
Display : none;}

Otherwise, it is also possible to define the properties of several elements in a single declaration.

The following example shows how to assign the same font size to the buttons’ labels as well as the seek bar’s label, inside the same block.

.ui-skin-modern .ui-button .label, .ui-skin-modern .seekbar-label {
    font-size : 2em
}

Images:

Embedding images and icons directly into the CSS file can be done by using a base64 encoding. By this way, the customer’s browser has to do less request than if he has to request every single element. That speed up the player’s loading phase. (the browser only have to request the CSS file and no other external files related to the player design).

Example 1 :

Changing the icon of the button used to change the Settings toggle button

.ui-skin-modern .ui-settingstogglebutton {
    background-image: url(“data/image/png;base64,UhEUgA(...)AAJgg==”);
}

Switching from JSON to CSS

Since the Player V7 release, skin customization using JSON is no longer supported. To be used across the player’s versions, a former customized skin has to be re-written in CSS. With the previous syntax, there were no links between several properties of a same object. For each object, each property had to be configured in a different field of the JSON object.

Legacy skinning using JSON:

var style =  {
...
 "screenLogoUrl": "http://www.dash-player.com/",
 "screenLogoImage": "data:image/png;base64,(...)"

...
}

Within the CSS syntax, properties are set inside the same class.

Example :

.ui-errormessage-label {
      color: #fff;
      font-size: 1.2em;
      left: 3em;
}

Conclusion:

By using a standard language like CSS it is now possible to customize and choose in details every single User interface’s component of your website’s player. Users can also take advantage of all possibilities and properties to customize their player the most efficient way.

Back to Top
Simple Share Buttons