Demo for jmeControl

Videoplayer

video: big buck bunny
play / pause 00:00
play position
00:00 mute / unmute
volume control

(c) copyright Blender Foundation | www.bigbuckbunny.org


Audioplayer

audioplayer
play / pause 00:00
play position
00:00 mute / unmute
volume control

How to

I. Include the JS- and CSS-File:

<!-- the jquery ui theme is not mandatory --> <link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/redmond/jquery-ui.css"/> <link rel="stylesheet" href="css/player-controls.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <!-- you only need slider & progressbar widget from jquery ui (jquery.ui.core, jquery.ui.widget, jquery.ui.mouse, jquery.ui.slider, jquery.ui.progressbar) --> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> <script src="../packages/mm.full.min.js"></script>

II. call jmeControl on the wrapper element on Document Ready

jmeControl makes your HTML5 media elements cross browser and enables all Control-Elements inside of the wrapper element.

$(function(){ $('div.media-player').jmeControl(); });

III. Configure path to swf-Fallback

Note: If the player.swf is not in your JS-folder. You have to configure the path to the JW-Player. There are two ways to achieve this (Using Markup or using JavaScript Configuration):

Configute swf path width markup

<script class="jwPlayer" type="application/swf" src="../packages/player.swf"></script>

Configute swf path in JS

$(function(){ $('div.media-player').jmeControl({ embed: { jwPlayer: { path: 'path-to/player.swf' } } }); });

IV. Use HTML5 media elements with some control-elements

jme uses a Markup-API to enable custom stylable controls, by using predefined HTML-Classes (i.e. play-pause for a play-pause Toggle-button or current-time for a current-time display).

You find a full list of control classes in the control-documentation.

<div class="media-player"> <video poster="media/bbb_watchtrailer.gif" controls="controls"> <source src="media/bbb_trailer_mobile.m4v" /> <source src="media/bbb_trailer_400p.ogg" /> </video> <button class="play-pause">play / pause</button> <button class="mute-unmute">mute / unmute</button> </div>