JS Controlbar
Introduction
The JavaScript controlbar for the JW Player is an easy to use alternative to the built in Flash controlbar. It offers all of the same functionality as the built in controlbar, and allows users to style its appearance via CSS.
Installation
Setting up the JW Player's JavaScript controlbar is fast and easy. Just follow these simple steps and you'll be up and running in no time!
- Download the following files and place them on your web server.
- Add the following HTML to all pages that will use the JavaScript controlbar.*
<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" />
* We recommend placing this HTML in the <head> of your page, but any place before your first JW Player should be fine.
Stylizing the JavaScript Controlbar
To stylize the JavaScript controlbar, simply edit the included jscontrolbar.css. 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 the following line to the CSS entry for that element: "display:none;"
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>
JW WMV Player
Download the newest JW Player built with Silverlight. It’s as flexible as the FLV Player but works with Windows Media files. What could be better?
