Creating a JavaScript ControlBar
NOTE: This document has been deprecated and is applicable to JW Player Versions 5.0, 5.1, and 5.2 only.
The JavaScript ControlBar for the JW Player is an easy-to-use alternative to the built-in Flash ControlBar. While the JavaScript ControlBar offers all of the same functionality as the Flash ControlBar, it is much easier and less time consuming to stylize, as you need only a basic understanding of CSS. This tutorial covers how to:
- Install the JavaScript ControlBar
- Style the JavaScript ControlBar
- Understand the Structure of the JavaScript ControlBar
Step 1: Install the JavaScript ControlBar
- Download the following files and place them on your web server.
- Add the following HTML to all pages that will use the JavaScript ControlBar.
* We recommend placing this HTML in the <head> of your page, but any place before your first JW Player reference should be fine.
<script type="text/javascript" src="http://www.mydomain.com/jscontrolbar/jquery.js"></script> <script type="text/javascript" src="http://www.mydomain.com/jscontrolbar/ui.core.js"></script> <script type="text/javascript" src="http://www.mydomain.com/jscontrolbar/ui.slider.js"></script> <script type="text/javascript" src="http://www.mydomain.com/jscontrolbar/jquery.jscontrolbar.js"></script> <link rel="stylesheet" type="text/css" href="http://www.mydomain.com/jscontrolbar/jscontrolbar.css" />
Step 2: Style the JavaScript ControlBar
To stylize the JavaScript ControlBar, edit the included jscontrolbar.css stylesheet. All of the elements and their default styles are listed.
Hints
- Be specific with your CSS class names! Make sure you define styles for .jscontrolbar .play and not .jscontrolbar or .play as the latter may have unintended consequences.
- To hide a button, add "display:none;" to the CSS entry for that element.
Step 3: Understand the Structure of the JavaScript ControlBar
This is the HTML structure of the JavaScript ControlBar. It is provided for your reference when stylizing the ControlBar.
<div class="jw_controlbar"> <div class="jw_controlbar play"></div> <div class="jw_controlbar pause"></div> <div class="jw_controlbar stop"></div> <div class="jw_controlbar currenttime">00:00</div> <div class="jw_controlbar scrubber ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"> <div class="ui-slider-range ui-slider-range-min ui-widget-header"/> <a href="#" class="ui-slider-handle ui-state-default ui-corner-all"/> </div> <div class="jw_controlbar totaltime">00:00</div> <div class="jw_controlbar fullscreen"></div> <div class="jw_controlbar mute"></div> <div class="jw_controlbar unmute"></div> <div class="jw_controlbar volume ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"> <div class="ui-slider-range ui-slider-range-min ui-widget-header" /> <a href="#" class="ui-slider-handle ui-state-default ui-corner-all"/> </div> </div>