Skinning with the new Bitmovin HTML5 Player v7 UI

12 January 2017 . 4 min read

A beautifully designed and customizable HTML5 video player delivering brilliant user experiences on every device.

As they say, you only get one chance to make a first impression, and in the case of an HTML5 video player, that impression starts before your customers even hit the play button. This is why our latest release includes not only a completely new design interface, but also all the tools you need to customize every aspect of your player so you can truly make it your own.
The Bitmovin HTML5 Player v7 has been optimized for compatibility across all devices and platforms, and the new skin is a major part of that optimization. Our new default skin has been carefully crafted for every screen size, and will deliver a consistent look and feel and a brilliant user experience, straight out of the box.
The new skin design has been built with customization in mind and can be styled using CSS classes. The design has been developed with a neutral style, so that a few colour changes and an update of the corner logo is enough to produce a unique and professional result that reflects your corporate style. If you want to go further, the Bitmovin Player is also ready for a complete corporate makeover. Every overlay, text and button graphic and style can be customized, giving you complete control over every aspect of your players skin.
Whether you need to modify the skin to match your corporate identity, or adjust the size or colours of your buttons to make life easier for your specific audience, the Bitmovin HTML5 Player, as with all of the Bitmovin products, has been developed with your developers in mind, so it is easy to integrate into your platform. The following tutorial will show you how.

Customizing the Default Skin

All the available CSS classes are referenced in our Skin Classes Reference. These classes are provided to enable our customers to easily customize the player’s look and feel.
The following example illustrates how to change the color of the seekbar as well as the text colors via CSS. By default, those elements are blue. By defining the attribute “color” within the appropriate classes, it is possible to make all these elements become green.

When the player is loaded, it is initialized with the default CSS skin. The associated class is .bmpui-ui-skin-modern. The following CSS code shows how we can update the colour by identifying elements within the main class.

&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
.bmpui-ui-skin-modern .bmpui-ui-label {
   color: "#00FF00";
}
       .bmpui-ui-skin-modern .bmpui-ui-volumeslider .bmpui-seekbar .bmpui-seekbar-playbackposition {
        background-color: "#00FF00";
        margin: 0.41em 0;
}
.bmpui-ui-skin-modern .bmpui-ui-seekbar .bmpui-seekbar .bmpui-seekbar-playbackposition {
        background-color: "#00FF00";
        margin: 0;
}
&lt;/style&gt;;

There are mainly two ways to implement skin customization; either importing a custom CSS file in the webpage or writing the CSS statements directly between two “style” tags. The latter is used in the above example.

Upgrade guide

CSS skinning is one of the major improvements in the Bitmovin’s HTML5 Player v7. By following the instructions below as well as using the skin-migrating guide, users who were accustomed to design their skins before the 7th major release can easily translate their existing skins to CSS and continue improving them by taking advantage of the new capabilities of v7

Differences Between the two Configuration Modes

JSON (JavaScript Object Notation) is a way to format some variables and their values inside an object. This format was used for skinning in previous versions of the Bitmovin Player. This notation is quite simple but doesn’t provide the most efficient way to configure all elements’ parameters. This is why Bitmovin introduced CSS for the skinning configuration. CSS language is much more efficient and provides the possibility to configure several elements simultaneously in one statement, thanks to CSS’s inheritance properties.
For instance, if you wish to set a parameter that has to be applied to several graphical elements of an entire “zone” (for instance the setting panel), you can achieve such a configuration with one line instead of needing to repeat the same information in multiple lines. It will save you time, and avoid the risk of forgetting elements.

.bmpui-ui-skin-modern .container-wrapper &lt; .bmpui-ui-settings-panel {
    margin: 3;
}

Migrate a Skin from JSON to CSS

To obtain the same skin using both notations (JSON and CSS) you have to find the CSS class-parameter couple corresponding to the JSON parameter that has to be translated. As in JSON, if a parameter is not specified, it will be set with the default value. If a graphical element is not customized, its design will be inherited from the new default skin of the player.
Example:
The following example shows how to translate a color customization from JSON to CSS. The JSON Parameter optionsBgColor can be used to change the background of the option’s menu.
JSON Parameter:

{
    optionsBgColor = "#FFFF";
}

CSS Equivalent:
The option menu is now called settings-panel so to achieve our goal, let’s change the color property of the settings-panel.

.bmpui-ui-skin-modern .bmpui-ui-settings-panel {
    background-color: "#FFFF";
}

For more details about skin translations, our Migration Guide provides a translation table to help you quickly find the CSS class for the item you want to customize.

Conclusion

With the new skinning feature, Bitmovin has created a very flexible system for customizing the look and feel of your player. Having chosen one of the most used web design languages (CSS), changing the appearance of the default skin, or create entirely new ones has never been so simple. For users who are interested in implementing even more customization than the new default UI provides, the Bitmovin Player UI framework is available open-source and can easily be extended.