Loop Example

What It Does

This is just a simple demo of how to add a "Loop" toggle button.

Setup

1

Source Code

This is the source code for the loop button. To add new plugins just add a buildMYPLUGINNAME function to the MediaElementPlayer object, and then add PLUGINNAME to the features array. 

(function($) {
	// loop toggle
	MediaElementPlayer.prototype.buildloop = function(player, controls, layers, media) {
		var 
			// create the loop button
			loop = 	
			$('
' +
				'' +
			'
')
			// append it to the toolbar
			.appendTo(controls)
			// add a click toggle event
			.click(function() {
				player.options.loop = !player.options.loop;
				if (player.options.loop) {
					loop.removeClass('mejs-loop-off').addClass('mejs-loop-on');
				} else {
					loop.removeClass('mejs-loop-on').addClass('mejs-loop-off');
				}
			});		
	}
})(jQuery);
2

Add Script and Styles

Add the normal files, and the also include the loop plugin.

<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<!-- here's the plugin we just made -->
<script src="mejs-feature-backlight.js"></script>
3

Include the plugin in the features list

jQuery(document).ready(function($) {

	// create player
	$('#player1').mediaelementplayer({
		// add desired features in order
		// I've put the loop function second,
		features: ['playpause','loop','current','progress','duration','volume']
	});

});