Note: This article covers custom coding that is not provided or covered by CMS support. This is meant to be a guide for custom coders to swap out the existing player in favor of another player or their own solution.

In the PHP templates, the main spot where the movie player loads is in a file called:

gallery/movie_player.tpl

You'll see a block of code that looks like this:

mwm = Math.min($("#mediabox_parent").width(), wdth);
mhh = Math.round(mwm * hdth / wdth);

txt = '<div id="mediacontainer" style="min-height:' + mhh + 'px; max-width:' + wdth + 'px; max-height:' + hdth + 'px;">'
txt = txt + '<video width="100%" height="100%" id="mediabox"'

if (uimage != "" && uimage != undefined && ("<?= $templatefields["flashvarsgalleryautoplay"] ?>" == "0"))
{
		txt = txt + ' poster="' + escape(uimage) + '" ';
}

txt = txt + '>';
for(i = 0; i < lst.length; i++)
{
		txt = txt + "\n" + '<source type="' + lst[i].type + '" src="' + lst[i].src + '" />';
}

if (trackfile != "")
{
		txt = txt + "\n" + '<track kind="metadata" class="time-rail-thumbnails" src="' + trackfile + '"></track>';
}

txt = txt + '</video>';
txt = txt + '</div>';

$("#mediabox_parent").html(txt);

$( window ).resize(function() {
		mwm = Math.min($("#mediabox_parent").width(), wdth);
		mhh = Math.round(mwm * hdth / wdth);
		$("#mediacontainer").css("min-height", mhh + "px");
});

passobj.success = function(media, node, player) {

	if ("<?= $templatefields["flashvarsgalleryautoplay"] ?>" != "0")
	{
		media.play();
	}

	media.addEventListener('play', function(e){

		if (started == 0)
		{
				for(i = 0; i < picarr.length; i++)
				{
						if (media.src.indexOf(escape(picarr[i].path)) > 0)
						{
						url = "stattrack.php?pagename=image&id=" + picarr[i].id + "&cg=" + picarr[i].setid + "&type=" + picarr[i].type + "&mt=" + picarr[i].name;
						$.get(url);
						}
				}

				started = 1;
		}
	});

	media.addEventListener('ended', function(e){
		started = 0;
	});

	<?php if (isset($trial)) { ?>

		media.addEventListener('ended', function(e){

		document.getElementById('mediabox_parent').style.display = 'none';
		document.getElementById('hpromo').style.display = 'block';

		if (document.getElementById("postroll_url"))
		{
				document.getElementById("postroll_url").href = "<?= $trial["videourl"] ?>";
		}

		});

	<?php } ?>
};

passobj.features = ['playpause','progress','current','duration','tracks','volume', 'timerailthumbnails','fullscreen'];

$('#mediabox').mediaelementplayer(passobj);

Here's a breakdown of what this does:

mwm = Math.min($("#mediabox_parent").width(), wdth);
mhh = Math.round(mwm * hdth / wdth);

txt = '<div id="mediacontainer" style="min-height:' + mhh + 'px; max-width:' + wdth + 'px; max-height:' + hdth + 'px;">'
txt = txt + '<video width="100%" height="100%" id="mediabox"'

if (uimage != "" && uimage != undefined && ("<?= $templatefields["flashvarsgalleryautoplay"] ?>" == "0"))
{
		txt = txt + ' poster="' + escape(uimage) + '" ';
}

txt = txt + '>';
for(i = 0; i < lst.length; i++)
{
		txt = txt + "\n" + '<source type="' + lst[i].type + '" src="' + lst[i].src + '" />';
}

if (trackfile != "")
{
		txt = txt + "\n" + '<track kind="metadata" class="time-rail-thumbnails" src="' + trackfile + '"></track>';
}

txt = txt + '</video>';
txt = txt + '</div>';

The way mediaelements.js works is that it relies on the system having an HTML <video> tag in place. An example code being built would look like so:

<video width="100%" height="100%" id="mediabox" poster="/path/to/image.jpg">
	<source type="video/mp4" src="/path/to/video.mp4" />
</video>

All of the code above the video block is building out this HTML manaully. Mediaelements.js requires this, however, some players have a programmatic interface to pass along video source information.

Depending on how your replacement player works will determine how you'll build out this information.

$("#mediabox_parent").html(txt);

This is the actual code that swaps in the generated video tag. We have a <div> with an id of "mediabox_parent" that the video tag code is inserted into.

$( window ).resize(function() {
		mwm = Math.min($("#mediabox_parent").width(), wdth);
		mhh = Math.round(mwm * hdth / wdth);
		$("#mediacontainer").css("min-height", mhh + "px");
});

This is handler code that will shrink down the video window when you resize the browser window. Something like this may or may not be necessary for a player replacement for it to be responsive.

passobj.success = function(media, node, player) {

	if ("<?= $templatefields["flashvarsgalleryautoplay"] ?>" != "0")
	{
		media.play();
	}

	media.addEventListener('play', function(e){

		if (started == 0)
		{
				for(i = 0; i < picarr.length; i++)
				{
						if (media.src.indexOf(escape(picarr[i].path)) > 0)
						{
						url = "stattrack.php?pagename=image&id=" + picarr[i].id + "&cg=" + picarr[i].setid + "&type=" + picarr[i].type + "&mt=" + picarr[i].name;
						$.get(url);
						}
				}

				started = 1;
		}
	});

	media.addEventListener('ended', function(e){
		started = 0;
	});

	<?php if (isset($trial)) { ?>

		media.addEventListener('ended', function(e){

		document.getElementById('mediabox_parent').style.display = 'none';
		document.getElementById('hpromo').style.display = 'block';

		if (document.getElementById("postroll_url"))
		{
				document.getElementById("postroll_url").href = "<?= $trial["videourl"] ?>";
		}

		});

	<?php } ?>
};

This does three things.

1. 1. Once the mediaelements.js player is open, it determines whether or not to autoplay.
   2. Once a movie is played, the does a callback to stattrack.php to record the movie as viewed. If you don't use the stats plugin, this functionality does not matter.
   3. In a trial area, once the movie is done, hide the movie div, and display an element that upsells them on a full membership. This only applies to trial areas and can be excluded otherwise.

passobj.features = ['playpause','progress','current','duration','tracks','volume', 'timerailthumbnails','fullscreen'];

Before creating the video player option, this is a feature that determines what options to load. This can be disregarded for your own player, however, you'll want to make sure your settings are included here.

$('#mediabox').mediaelementplayer(passobj);

This is the instantiation of the mediaelements.js player on top of the regular HTML5 video player you created up above.

In order to replace the player on the PHP templates, you will need to:

1. Make sure to have any includes to the new scripting file on the top of movie_player.tpl as needed.
2. Take out this existing chunk of code that creates the <video> tag and starts the mediaelements.js code
3. Add in new relevant player code that creates and assigns the new player. You will want to almost certainly make sure the new player is created within the #mediabox div.