jMediaelement embedding media elements

The jMediaelement script follows the principles of progressive enhancement. To achieve this it uses unobtrusive JavaScript- and feature detection technics (no browser sniffing or bad assumptions even for embedding plugins / COM objects like flash).

The HTML Markup

All you have to do is to add the HTML-Structure for the HTML 5 media elements:

									<video src="../media/some-video.mp4" controls="controls"></video>
								

You can also use the poster, loop or the autoplay attributes to configure the default behavior of your player. If you have multiple media-files, you can use the source-elements.

									<audio controls="controls" autoplay="autoplay">
									    <source src="../media/some-audio.ogg" type="audio/ogg" />
									    <source src="../media/some-audio.mp3" />
									    <a href="../media/some-audio.ogg" class="../media/some-audio.ogg">Audio as ogg/vorbis</a>
									    <a href="../media/some-audio.mp3" class="../media/some-audio.ogg">Audio as mp3</a>
									</audio>
								

The javascript-method .jmeEmbed()

The jmeEmbed-method is a jQuery-Plugin, which makes your media element cross-browser and establishes the unified API.

The jmeEmbed-method has two simple configuration properties, called removeControls and showFallback.

removeControls

If you want to add custom, styleable controls for example, it is highly recommended to use the controls-attribute in your markup and change the removeControls property to true (default is false). Only, if javascript is enabled, the controls will be removed and you can provide some nice controls to the end user. If JavaScript is disabled, the native control-elements remain, so that the end user can still interact with the mediaelement.

									$('audio, video').jmeEmbed({removeControls: true});
								

showFallback

If you generate a nice Fallback-Message inside of your media element and the browser supports the HTML5 media elements, but not the format, the browser won´t show this message to its user. If you change the showFallback-property to true (defaults to false), it will show the message also to users, with modern HTML5 browsers.

									<video src="myvideo.mp4">
									    <div class="fallback">
									        Please install Flash or use a webkit based browser, to see the <a href="myvideo.mp4">video</a>
									     </div>
									</video>
								

or

									<video src="myvideo.ogg">
									    <div class="fallback">
									        Please use Firefox/Opera/Chrome, to see the <a href="myvideo.ogg">video</a>
									     </div>
									</video>
								

									$('audio, video').jmeEmbed({showFallback: true});
								

plugin extensions

Every jmeEmbed-extension extends the jmeEmbed-Options, to let you configure their behavior.

JW-Player Options

The JW-Player adds his options under the property-name jwPlayer. If you put the player.swf, jmefs.swf and yt.swf (last is for youtube) in your JS-Folder, you won't have to configure anything.

If you want to put the player.swf elsewere, you have to configure the ‘path’-property

								$('audio, video').jmeEmbed({
								    jwPlayer: {
								        path: '../mediaplayers/player.swf'
								    }
								});
								

and for the jmefs plugin

								$('audio, video').jmeEmbed({
								    jwPlayer: {
										plugins: {jmefs: '../mediaplayers/jmefs.swf'},
								        path: '../mediaplayers/player.swf'
								    }
								});
								

In some cases, you also want to add some additonal params, attributes or flashvars. To achieve this you can use the corresponding option-properties params, attrs, vars.

Note: wmode is automatic set to 'transparent', if the wmode-parmater isn't configured and the controls-attribute is false

								$('video').jmeEmbed({
								    jwPlayer: {
								        path: '../mediaplayers/player.swf',
								        params: {
											//make video transparent
								            wmode: 'transparent'
								        },
										vars: {
											//we support http-pseudo-streaming
											provider: 'http'
										}
								    }
								});