<!-- 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>
jmeEmbedControls makes your HTML5 media elements cross browser and will append some Control-Elements inside of the wrapper element.
$(function(){
$('div.media-player').jmeEmbedControls();
});
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):
<script class="jwPlayer" type="application/swf" src="../packages/player.swf"></script>
$(function(){
$('div.media-player').jmeEmbedControls({
embed: {
jwPlayer: {
path: 'path-to/player.swf'
}
}
});
});
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>
</div>
(c) copyright Blender Foundation | www.bigbuckbunny.org