Customizing an HTML5 Player V3 With CSS
You can customize your HTML5 Player V3 skin or theme using a Cascading Style Sheet (CSS) file or inline CSS elements.
The HTML or web page (such as myvideopage.html) or pages.
The CSS file containing the web page and player styles (such as myvideo.css).
HTML5 Player V3 UI ElementsYou can use CSS to change the color, border, size and other aspects of various player controls. The following table lists some typical player controls some of which are automatically provided in the Ooyala default player. Note that the terms used for the Player controls are unconstrained and up to the developer to create. You can however use a web development tool such as Firebug or its equivalent to inspect the DOM tree of the Ooyala demo and see how the player controls were named and styled.
|Player Control||Use this Control to:|
|Play||Start playing a video.|
|Pause||Halt the video mid-stream. When selected, the video will resume playing at the point it was paused.|
|Stop||Stop the video.|
|Replay||Once the video is complete, select to restart at the beginning.|
|Autoplay||Automatically replay the video when it completes.|
|Fullscreen||Expand the video to occupy the full dimension of the device screen.|
|Scrubber bar||Advance or retract the scrubber bar to seek to a particular position in the video.|
|Share||Enable or disable sharing options such as Digg, Stumble Upon, Facebook, Twitter, Email.|
|Embed||Display the embed code and enable copying of the embed code.|
|Info||Display informational text such as the title or description of the video.|
height - set the height of an element such as the div container or an image overlay.
width - set the width of an element.
border - create a border around an element such as the div container or player.
float - used to position a CSS element to the left or right, allowing other elements to wrap around it.
opacity - you can use this to easily create a transparent image or to make a CSS element transparent.
mask - combines opacity values and clipping (using shapes, text or paths) to define parts of the mask.
gradients - provide a smooth transition from one color to another. You can apply several color transitions to the same element.
transforms - enables you to apply 2D or 3D effect to an element, enabling you to rotate, scale, move, and skew elements.