Skip to content
This repository has been archived by the owner on Jul 19, 2024. It is now read-only.

Providing a New CSS

Jump to bottom
Scott Miller edited this page Mar 29, 2016 · 3 revisions

This topic provides some tips and guidelines about customizing the CSS of your MediaPlayer class. You can do this to provide a unique look and feel for your app.

  • Overriding a CSS Class
  • MediaPlayer CSS Layout
  • Using the CSS to Customize the Colors

Overriding a CSS Class

In order to customize the CSS for your app, you need to be familiar with how CSS works. One single element in an application can have several different CSS files imposing style restrictions upon it. CSS follow a hierarchy where the last loaded CSS file is the one that takes precedence. Because of this, you should always load the embedded CSS files first, and your custom CSS files last. The following snippet shows what this might look like.

<link href="/css/mediaplayer-1.0.0.0.css" rel="stylesheet" />  
<link href="/css/playback_page.css" rel="stylesheet" />  
<link href="/css/purchasing_page.css" rel="stylesheet" />  
<script src="/js/script.js"></script>

In order to override a CSS class, you first need to determine the rule that you want to override. The easiest way to do this is by using the DOM explorer, a tool provided in most modern browsers.

  1. Open the DOM explorer in your browser of choice.

  2. Select the element that you want to override. You may have to expand the HTML tags until you find the desired element.

  3. Find the relevant rule that you want to override. Select Copy CSS rule.

  4. Paste the rule into your own CSS file and alter it as necessary.

MediaPlayer CSS Layout


Figure 1. MediaPlayer CSS layout

Figure 1 provides an illustration of the CSS classes that make up the MediaPlayer class. This shows you how the different classes interact and lay on top of one another. The following table lists the different classes that you can override to provide a customized experience with your media app.

The following are the list of classes and descriptions of each class:
.tv-mediaplayer
The root class of the MediaPlayer class.

.tv-mediaplayer-container
An intermediate container that acts as a buffer between the root class and the content. It has two children - the controls overlay and the audio or video tag.

.tv-mediaplayer-controls
The container for the controls overlay. If you attach your custom DOM to this element, then your custom DOM will be shown and hidden at the same time as the other transport controls.

.tv-mediaplayer-currenttimeindicator
Text showing the current time for the media.

.tv-mediaplayer-mediadescription
A short textual description of the media.

.tv-mediaplayer-mediatitle
Text indicating the title of the media.

.tv-mediaplayer-seekbar
A bar showing the total duration of the media.

.tv-mediaplayer-seekprogress
A bar showing the percentage of the media that has been played.

.tv-mediaplayer-totaltimeindicator
Text showing the total duration of the media.

tv-mediaplayer-transportcontrols
The container holding the transport controls.

.tv-mediaplayer-transportcontrols-primary
The primary transport control buttons. These include common actions such as play, rewind, and fast forward.

.tv-mediaplayer-transportcontrols-secondary
The secondary transport control buttons. This class is not used at this time but is reserved for future releases.

Using the CSS to Customize the Colors
One example of using the CSS to customize your media app is to provide custom colors for different elements in the media player. If you are customizing the colors, you are responsible for the contrast ratio with the new colors.

The following code snippet will customize the color of the title and description for the media. If this is included in your custom CSS file, the title and description will be red rather than the default white color. You can use this technique to customize the color of the elements of the media player.

Important
It is important to know that shared apps use 16-235 calibration. This means that the maximum RGB channel (pure white) is 235 and the minimum channel (pure black) is 16.

Clone this wiki locally