Introduction

Webshim's mediaelement feature implements the base features to view and control a video display and sound thorugh the video element and audio element. It also implements flv and streaming capabilities including youtube playback in all browsers.

This document does not describe how to use those native/polyfilled features. It only describes the extensions build on top of it.

Custom video controls for video and audio elements

Custom controls for audio/video elements can controlled through the replaceUI option. This can be set to true, false or "auto". If the string "auto" was used the custom controls are only loaded and replaced for devices with some CSS3 support (i.e.: not IE8) and where the following media query matches: (min-device-width: 719px) (i.e. not smartphones, but tablets).


webshim.setOptions('mediaelement', {replaceUI: 'auto'});
webshim.polyfill('mediaelement');

The controls are only added inside elements with a class .mediaplayer (This can be configured through the selector option).. While webshims might load basic styling for the custom controls. The basic styling of this wrapper element including the video element itself has to be done in the normal stylesheet:


<style>
	/* add basic styles */
	.mediaplayer {
		position: relative;
		height: 0;
		width: 100%;
		padding-bottom: 56.25%; /* 16/9 */
	}

	.mediaplayer video,
	.mediaplayer .polyfill-video {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
	}

	.touchevents .mediaplayer {
		font-size: 24px;
	}

	@media (pointer:coarse), (touch-enabled), (-moz-touch-enabled), (-webkit-touch-enabled) {
		.mediaplayer {
			font-size: 24px;
		}
	}
</style>

<script>
	webshim.setOptions('mediaelement', {replaceUI: 'auto'});
	webshim.polyfill('mediaelement');
</script>

<div class="mediaplayer">
	<video poster="poster.jpg" controls="" preload="none">
		<source src="my-video.mp4" type="video/mp4" />
		<source src="my-video.webm" />
	</video>
</div>

Configure the controlbar

All controls option can be configured thorugh the jme option object (spelled Jamie = jQuery mediaelement).

For exmaple the .mediaplayer selector can be changed through the selector option.


webshim.setOptions('mediaelement', {
	jme: {
		selector: '.myplayer' //.mediaplayer
	}
	replaceUI: 'auto'
});
webshim.polyfill('mediaelement');

While the controls are fully styleable through CSS, the markup can be controlled by changing the barTemplate option:

Creating a playlist

Webshims fully implements the mediaelement API, so that a developer can change the src attribute of a video element (using $.prop/$.attr) or creating new source elements and appending those (using $.appendPolyfill) after the ended event has occurred.

Webshims also comes with a playlist plugin, which makes it easy to create multiple playlist for a mediaplayer.


webshim.setOptions('mediaelement', {
	replaceUI: 'auto',
	//request playlist plugin
	plugins: ['playlist']
});

//start loading mediaelement including plugins
webshim.polyfill('mediaelement');

//wait until the playlist feature + DOM is ready
webshim.ready('playlist', function(){
	/**
	* Adding a playlist is done through the jmeFn's 'addPlaylist' method
	* addPlaylist receives two arguments:
	* 1. The list, which is either a) an array of play items, b) a string/URL to a valid data source or c) a DOM node or jQuery object, of a playlist with child elements, that are treated as playlist items
	* 2. Some options
	*
	* and returns the constructed playlist
	*
	* var playlist = $('.mediaplayer').eq(0).jmeFn('addPlaylist', 'path-to-rss-fee.xml', {showcontrols: true, autoplay: true});
	*/

	//The Playlist in this site is done with the following code:
	var playlist = $('.mediaplayer')
		.eq(0)
		.jmeFn('addPlaylist', 'mediaelement/playlist.json', {
			showcontrols: true,
			autoplay: true,
			ajax: {dataType: 'json'}
		})
	;

	playlist.render(function($playlist, $player){
		$playlist.insertAfter($player);
	});

});