Loop Example

What It Does

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



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) {
			// 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);

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>

Include the plugin in the features list

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

	// create player
		// add desired features in order
		// I've put the loop function second,
		features: ['playpause','loop','current','progress','duration','volume']