Demo for jmeEmbedControls

Videoplayer

video: big buck bunny

Audioplayer

audioplayer

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> <!-- include jme-file --> <script src="../packages/mm.full.min.js"></script> <!-- good for rapid development and quick start --> <script src="../utils/jmeEmbedControls.js"></script>

II. call jmeEmbedControls on the wrapper element on Document Ready

jmeEmbedControls makes your HTML5 media elements cross browser and will append some Control-Elements inside of the wrapper element.

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

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').jmeEmbedControls({ embed: { jwPlayer: { path: 'path-to/player.swf' } } }); });

IV. Use HTML5 media 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).

The uitility 'jmeEmbedControls' will append some of these controls. Note, that you can change them/this file for your needs.

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&gt; </div>

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