In order to upgrade Smarty templates to no longer use the JW player, please perform the following:
1) Download the newest version of the PHP templates from here: https://support.elevatedx.com/newest_templates.php
Under Smarty Templates, please take a look at the thumbnails for the smarty templates. Typically, the name of your template folder matches up with the name of the template (such a theme2, but you may want to look at the thumbnail to see which is the closest match to your templates)
2) Within the download, there will be a folder:
e.g: /streamline/js/mp/
e.g: /theme1/js/mp/
e.g: /theme2/js/mp/
e.g: /theme3/js/mp/
Please create the following folder for each area you're using: /tour/js/mp/
Where /tour/ is your tour folder, and /members/ is your members area folders. Then upload the contents of /members/js/mp/ into these folders.
3) The following files will need to be edited or replaced within your template folder:
Standard Templates
[TEMPLATE_FOLDER]/globals/globals.tpl [TOUR_PATH]/js/tour.js
Mobile templates:
[TEMPLATE_FOLDER]/tour/episode.tpl [TEMPLATE_FOLDER]/tour/page_top.tpl
[TOUR_PATH]/js/tour.js
Template Changes:
If you have made template changes to these files, below are details about what has changed in each file:
Desktop Template Changes:
Changes in: [TEMPLATE_FOLDER]/globals/globals.tpl
Old Code:
{** These are JW Player 6 Library Includes **} <script type="text/javascript" src="js/jwplayer.js"></script> <script type="text/javascript">jwplayer.key="qLzynSodouEg2o+gukjzO+6P0dzyHYq1TqcHaUF9cJE=";</script>
New Code:
<!-- These are MediaElements.js includes --> <script src="js/mp/mediaelement-and-player.min.js"></script> <link rel="stylesheet" href="js/mp/mediaelementplayer.min.css" />
Changes in: [TOUR_PATH]/js/tour.js
Old Code:
afterShow: function () { jwplayer("mediaspace").setup({ file: v, width: 960, height: 540, autostart: true, events: { onComplete: function(e) { loadbanner(); } }
}); },
New Code:
afterShow: function () { txt = '<video width="960" height="540" id="mediabox">'; txt = txt + "\n" + '<source type="video/mp4" src="' + v + '" />'; txt = txt + '</video>'; $("#mediaspace").html(txt); $('#mediabox').mediaelementplayer({ success: function(media, node, player) { media.play(); media.addEventListener('ended', function(e){ loadbanner(); }); } }); },
Mobile Template Changes:
Changes in: [TEMPLATE_FOLDER]/tour/episode.tpl
Old Code:
<script> mobile_trailer = "{$item.trailer_url_mobile[0]}"
{literal} picarr = [] $(document).ready(function() { if (mobile_trailer == "") { return; }
passobj = {} passobj.file = mobile_trailer; passobj.image = "{/literal}content/{$item.Directory[0]}/0.jpg{literal}" passobj.autostart = false; passobj.width = parseInt($(".header").width()); passobj.height = parseInt($(".header").width() * 9 / 16);
passobj.primary = "flash"; jwplayer("mediaplayer").setup(passobj); }); $(window).resize(function() { if ( mobile_trailer != "" ) { jw_wdth = jwplayer('mediaplayer').getWidth(); jw_hdth = jwplayer('mediaplayer').getHeight(); wdth = parseInt($(".header").width()); hdth = parseInt(wdth * jw_hdth / jw_wdth); try { jwplayer('mediaplayer').resize( wdth, hdth ); } catch(e) { console.log(wdth + "x" + hdth + " " + jw_wdth + "x" + jw_hdth + " - " + e); } } }); {/literal}
</script>
New Code:
<script> mobile_trailer = "{$item.trailer_url_mobile[0]}"
{literal}
picarr = []
$(document).ready(function() {
if (mobile_trailer == "") { return; }
imgg = "{/literal}content/{$item.Directory[0]}/0.jpg{literal}" w = parseInt($(window).width()); h = parseInt($(window).width() * 9 / 16); try { txt = '<video width="' + w + '" height="' + h + '" id="mediabox" style="width: 100%; height: 100%;" ' if (imgg != "") { txt = txt + ' poster="' + imgg + '" '; } txt = txt + '>'; txt = txt + "\n" + '<source type="video/mp4" src="' + mobile_trailer + '" />'; txt = txt + '</video>'; // console.log(txt); $("#mediaplayer").html(txt); $('#mediabox').mediaelementplayer({
success: function(media, node, player) { } }); } catch(e) { alert(e) }
});
$(window).resize(function() {
if ( mobile_trailer != "" ) { w = parseInt($(window).width()); h = parseInt($(window).width() * 9 / 16);
$("#mediaplayer").width(w); $("#mediaplayer").height(h); } }); {/literal}
</script>
Changes in: [TEMPLATE_FOLDER]/tour/page_top.tpl
Old Code:
<script type="text/javascript" src="js/jquery.min.js"></script> <script type='text/javascript' src="js/jwplayer.js"></script> <script type="text/javascript">jwplayer.key="qLzynSodouEg2o+gukjzO+6P0dzyHYq1TqcHaUF9cJE=";</script> <script type='text/javascript' src="js/mobileinclude.js"></script>
<script> {literal} try { // starting the script on page load $(document).ready(function(){
if (typeof jwplayer !== 'function') { alert("Warning: File jwplayer.js not found."); } $(window).resize(function() { ResizeHeight(".element", ".info"); });
try { ResizeHeight(".element", ".info"); } catch(e) { alert(e); } }); } catch(e) { alert("Warning: File js/jquery.min.js not found."); } {/literal} </script>
New Code:
<script type="text/javascript" src="js/jquery.min.js"></script> <script type='text/javascript' src="js/mobileinclude.js"></script>
<script src="js/mp/mediaelement-and-player.min.js"></script> <link rel="stylesheet" href="js/mp/mediaelementplayer.min.css" />
<script> {literal} try { // starting the script on page load $(document).ready(function(){
if (typeof MediaElementPlayer !== 'function') { alert("Warning: File js/mp/mediaelement-and-player.min.js not found."); } $(window).resize(function() { ResizeHeight(".element", ".info"); });
try { ResizeHeight(".element", ".info"); } catch(e) { alert(e); } }); } catch(e) { alert("Warning: File js/jquery.min.js not found."); } {/literal} </script>
Changes in: [TOUR_PATH]/js/tour.js
See changes for js/tour.js under Desktop Template Changes.
|