Designing the Skin for an HTML5 Player V3 (Deprecated)

Ooyala provides many options for customizing the appearance and functionality of an HTML5 Player V3 when it is loaded.

Note: Ooyala Player V3 has been deprecated and is scheduled to be disabled. For details and alternatives, see the OVP Release Notes.
You can embed your player in a div container and use JavaScript  and CSS to customize the player experience. In addition, you can use CSS styling to modify the player container appearance with any of the available CSS and CSS3 styles. Before you use the CSS3 styles and the CSS styles, you need to make sure that your target browsers support these styles.

By enabling you to use CSS to customize your player experience, the player provides a convenient and efficient separation of some aspects of UI customization from backend player functionality. The player also enables you to customize player functionality using JavaScript APIs instead of query string parameters. Instead of working with both query string parameters and JavaScript, you can use JavaScript to create the functionality that you want for your HTML5 player, which allows you to retain your Flash player functionality as well.

Table 1.
Mechanism Description
CSS You can customize the Player UI, changing its default look and feel by modifying a CSS file. You can also use CSS files to create custom UI skins. This option enables you to create multiple skins for your Player UI by separating the backend functionality from the look and feel.  You can provide highly customized players tailored to a specific geographic region, demographic, or virtually any type of UI theme that you want.
Custom Modules Custom modules enables you to develop JavaScript-based functionality that you can load with your player. This custom module capability extends your ability to add complex functionality to your player and create uniquely branded players with JavaScript.
The following topics describe how to use the Player CSS and JavaScript customization. For more information about Player, see the Player V3 JavaScript API Reference (Deprecated). The HTML5 player gives you three options for customization:

Was this article helpful?