Swap out player with your own custom player in PHP templates
Posted by Mark [Elevated X Support] on 07 October 2016 12:58 PM
|
|
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.
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:
| |
|