Skin your player with standard web techniques
The controlbar can be skinned using standard HTML and CSS techniques, and graphics are supplied in a normal web format (JPG/PNG/GIF). Flash programming skills are not required at all.
The controlbar can be placed outside of the video player as well as positioned and sized in any way you like without any dependency on the video player's size and position on the page.
You can have many players on a page and each one can have their own controlbar. Various players can share the same design or each player can de given a different design.
Next we will show you the code that produces the example at the beginning of this page. If you want to view an example as a standalone page, you can find one here.
Unfortunately, the current implementation requires that HTML controls must be
window.onload. You cannot use jQuery's
which has a bug in Safari. I reported this bug in here and hopefully
it will be resolved. Safari doesn't know its element's dimensions beforehand
when using external stylesheets.
Alternatively, you can use jQuery's
$(window).load() so that you don't mess
with existing onLoad events if they exist. The Safari loading "feature" will
be studied to determine if a workaround exists.
The look and feel of the controlbar is controlled with an external CSS file. Our example uses this documented stylesheet file. You can tweak every aspect of the controls: dimensions, colors, background images and show/hide certain widgets - such as time display.
Take a look at a standalone version of this demo. View its source code to get things going on your page.
We have another demo with "Apple skin". You can view it here.
When the controlbar is installed inside an empty wrapper element it is automatically filled with the following HTML structure:
When you design the look and feel of your controlbar this is the actual HTML code you need to style with CSS. You should set up the background images and background colors for these elements. It's recommended that you start with the commented CSS file that was given in the above example.
Sometimes you may want to use your own HTML structure for the controlbar so you can apply your own functionaly and styling to it. In that case you should place your structure inside the container and use the same CSS class names as previously mentioned. However, you can also use your own class names if you want to, and it will be necessary to tell the plugin which elements will work as the progress bar, play button, playhead, and so on.
The controlbar takes two arguments. The first is the
id of the container that
will contain the controlbar. This can also be specified as a DOM element. The
second argument is an optional array of configuration parameters. Most of the
configuration options relate to the CSS class names you want your controlbar
elements to have. Here are all the parameters that can be specified with their
minified with Douglas Crockford's minifier
Please right-click and choose "Save link as..." (or similar)
See the version history for this tool.
Found a bug?