Replacing JW player with mediaelements.js in for Theme 1, Theme 2, Theme 3, Streamline Smarty Tour Templates
Posted by Mark [Elevated X Support], Last modified by AJ Hall on 01 November 2017 03:29 PM

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.

 

 

 

 

 

(0 vote(s))
Helpful
Not helpful

Comments (0)