Getting Started

To get quickly started you should start with the demos provided in the development bundle.

Adding the CSS and JS files

First you can include the CSS files:

									<!-- jQuery UI Theme: You don't have to use it, it only serves as a good starting point -->
									<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/redmond/jquery-ui.css"/>
									<!-- Base CSS  for jme-controls located in the demos folder You don't have to use it, it only serves as a good starting point -->
									<link rel="stylesheet" href="player-style-dts.css"/>
								

and then the JavaScript files (jQuery, jQuery UI and the jme-file)

									<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
									<!-- ui-components / jme only needs slider and progressbar widget -->
									<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
									<!-- END:  ui-components -->
									<!-- minified jme file -->
									<script src="../packages/mm.full.min.js"></script>
									<!-- Uitility, which renders predefined Controls -->
									<script src="../utils/jmeEmbedControls.js"></script>
								

Configuring and initializing jme

If you have included the JavaScript-Files, you can configure and initialize the jme script on Document Ready ( $(document).ready(function(){...}); ).

If you have copied the swf-files (player.swf and yt.swf) to your JavaScript-folder, you won't have to configure anything.

									$('div.media-player').jmeEmbedControls();
								

jmeEmbedControls is called on an element, that wraps a media element. It will append a predefined control-bar and add media controls behavior to these control elements.

If you want to have another path for your Flash-Files, you should configure the JW-Player path.

									$('div.ui-edia-player')
										.jmeEmbedControls({
											//embed options for the jmeEmbed-method
											embed: {
												//jwPlayer-embed-Options
												jwPlayer: {
													path: '../mediaplayers/jw-player/player.swf'
												}
											}
										})
									;
								

All possible embed-options are explained on the embedding site.

Adding the HTML5 markup

After including the files and initializing jmeEmbedControls, you can simply use the HTML5 markup

									<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>
								

Of course you can now add multiple videos / audios to your document, too.

									<div class="media-player">
										<video poster="media/bbb_watchtrailer.gif">
											<source src="media/bbb_trailer_mobile.m4v" />
											<source src="media/bbb_trailer_400p.ogg" />
										</video>
									</div>
									
									<div class="ui-media-player">
										<audio">
											<source src="media/ANC_sketchV2n.mp3" />
											<source src="media/ANC_sketchV2n.ogg" />
										</audio>
									</div>
								

Using flexible markup and adding new functionality

jme is an extreme flexible script, which let's you write your own media player with your own semantic control markup, distinctive style/UI behavior and your own powerfull featureset. Learn more about generating custom controls and using the jQueryfied DOM-API.

Dealing with problems

If you encounter a problem, have a look to the jme Troubleshooting & FAQ document. The most frequent problem is, that you have to add your local development directory to the local trusted sandbox, to get the controls work with the flash player. If your problem isn't described there feel free to post a question to the forum.