Knowledgebase: Step by Step Guides
Replacing JW player with mediaelements.js in standard 4.0 PHP templates
Posted by Mark [Elevated X Support], Last modified by Mark [Elevated X Support] on 01 October 2015 03:15 PM

In order to upgrade PHP templates to no longer use the JW player, please perform the following:

1) Download the newest version of the PHP templates from here:
http://support.elevatedx.com/newest.php

2) Within the download, there will be a folder:
cms_defaults/4.0/members/js/mp/
Please create the following folders:
 /members/js/mp/
 /tour/js/mp/

Where /tour/ is your tour folder, and /members/ is your members area folders.
Then upload the contents of cms_defaults/4.0/members/js/mp/ into these folders.

3) The following files will need to be edited or replaced within your template folder:

Standard templates:
cms_defaults/4.0/cms_admin/phptemplate/site0/functions/cdn_hook.tpl
cms_defaults/4.0/cms_admin/phptemplate/site0/gallery.tpl
cms_defaults/4.0/cms_admin/phptemplate/site0/gallery/movie_player.tpl
cms_defaults/4.0/cms_admin/phptemplate/site0/gallery_outside.tpl
cms_defaults/4.0/cms_admin/phptemplate/site0/header.tpl
cms_defaults/4.0/cms_admin/phptemplate/site0/tour/globals/globals.tpl
cms_defaults/4.0/tour/js/tour.js
Mobile templates (if you have mobile)
cms_defaults/4.0/cms_admin/phptemplate/site0_mobile/gallery/gallery1.tpl
cms_defaults/4.0/cms_admin/phptemplate/site0_mobile/tour/episode.tpl
cms_defaults/4.0/cms_admin/phptemplate/site0_mobile/tour/page_top.tpl

If you haven't made any changes to these files, we highly recommend you upload these replacement files in place. Copies of what's changed are available here:

https://support.elevatedx.com/jw_update/php_templates_desktop.zip

https://support.elevatedx.com/jw_update/php_templates_mobile.zip

https://support.elevatedx.com/jw_update/php_templates_tour.zip

 

If you have made template changes to these files, below are details about what has changed in each file.

 

Other PHP Templates:

If you are using the PHP hybrid site, tube site, or solo site templates, updates of these files are available here:

https://support.elevatedx.com/newest_templates.php

The same files are changed, but the layout of the zips are slightly different. The files you'll wish to update / change are:

Standard templates:
template_theme1/functions/cdn_hook.tpl
template_theme1/gallery.tpl
template_theme1/gallery/movie_player.tpl
template_theme1/gallery_outside.tpl
template_theme1/header.tpl
template_theme1/tour/globals/globals.tpl
theme1_tour/js/tour.js
Mobile templates (if you have mobile)
template_theme1_mobile/gallery/gallery1.tpl
template_theme1_mobile/tour/episode.tpl
template_theme1_mobile/tour/page_top.tpl

Note: Depending on which template you have downloaded, you may see theme2 or theme3 within the directory path instead of theme1. Please use those available templates accordingly.

 

Desktop Template Changes:

Changes in: cms_defaults/4.0/cms_admin/phptemplate/site0/functions/cdn_hook.tpl

You only need to upload this file if it is not present on your existing system. If this file already exists, do not replace it.

Changes in: cms_defaults/4.0/cms_admin/phptemplate/site0/gallery.tpl

Old code:

    jw_playerload()

New code:

    func_playerload(pxx)

Changes in: cms_defaults/4.0/cms_admin/phptemplate/site0/gallery/movie_player.tpl

  In this case, there are too many extensive changes to detail here. We recommend replacing this file entirely within your templates.

Changes in: cms_defaults/4.0/cms_admin/phptemplate/site0/gallery_outside.tpl

Old code:

    jw_playerload()

New code:

    func_playerload(pxx)

Changes in: cms_defaults/4.0/cms_admin/phptemplate/site0/header.tpl

Removed code:

        if (typeof jwplayer !== 'function')
        {
            alert("Warning: File jwplayer.js not found.");
        }

        if (typeof Silverlight !== 'object')
        {
            alert("Warning: File silverlight.js not found.");
        }

        if (typeof jeroenwijering !== 'object')
        {
            alert("Warning: File wmvplayer.js not found.");
        }

Removed code:

<script type='text/javascript' src='js/jwplayer.js'></script>
<script type="text/javascript">jwplayer.key="";</script>
<?php // Silverlight Code  ?>
<script type='text/javascript' src='js/silverlight.js'></script>
<script type='text/javascript' src='js/wmvplayer.js'></script>

Changes in: cms_defaults/4.0/cms_admin/phptemplate/site0/tour/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="";</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: cms_defaults/4.0/tour/js/tour.js

Old Code:

        afterShow: function () {        
            jwplayer("mediaspace").setup({
                file: v,
                width: w,
                height: h,
                autostart: true,
                events: {
                    onLoad: function(e) {
                      alert("hi")  
                    },
                    onComplete: function(e) {
                        loadbanner();
                    }
                }

            });
        },

New Code:

        afterShow: function () {
            
            ext = v.split('.').pop().split("?").shift();
            
            txt = '<video width="' + w + '" height="' + h + '" id="mediabox">';
            txt = txt + "\n" + '<source type="video/' + ext + '" src="' + v + '" />';
            txt = txt + '</video>';
            
            // console.log(txt)
            
            $("#mediaspace").html(txt);
            
            $('#mediabox').mediaelementplayer({
                
                enablePluginSmoothing: true,

                success: function(media, node, player) {
                    
                    media.play();
                    
                    media.addEventListener('ended', function(e){
                        loadbanner();
                    });
                }
            });    
        },

 

 

Mobile template Changes (if you have the mobile version)

Changes in: cms_defaults/4.0/cms_admin/phptemplate/site0_mobile/gallery/gallery1.tpl

  In this case, there are too many extensive changes to detail here. We recommend replacing this file entirely within your templates.

Changes in: cms_defaults/4.0/cms_admin/phptemplate/site0_mobile/tour/episode.tpl

Old Code:

<script>
    mobile_trailer = "<?php echo $item["trailer_url_mobile"] ?>"

    picarr = []

    $(document).ready(function() {

        if (mobile_trailer == "")
        {
            return;
        }

        passobj = {}
        passobj.file = mobile_trailer;
        passobj.image = "content/<?php echo $item["Directory"] ?>/0.jpg"
        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);
            }
        }
    });

</script>

New Code:

<script>
    mobile_trailer = "<?php echo $item["trailer_url_mobile"] ?>"

    picarr = []

    $(document).ready(function() {

        if (mobile_trailer == "")
        {
            return;
        }

        imgg = "content/<?php echo $item["Directory"] ?>/0.jpg"
        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({

                enablePluginSmoothing: true,

                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);
        }
    });

</script>

 

Changes in: cms_defaults/4.0/cms_admin/phptemplate/site0_mobile/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="";</script>
<script type='text/javascript' src="js/mobileinclude.js"></script>

<script>
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.");
}
</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>
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.");
}
</script>

 

 



Attachments 
 
(1 vote(s))
Helpful
Not helpful

Comments (0)