Knowledgebase: Step by Step Guides
Replacing JW player with mediaelements.js in standard 3.2 Smarty templates
Posted by Mark [Elevated X Support], Last modified by Mark [Elevated X Support] on 30 September 2015 01:14 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, the template you will want to use is 3.2 default.

2) Within the download, there will be a folder:
/members/js/mp/

Please create the following folders for each area you're using:
 /members/js/mp/
 /tour/js/mp/
 /tube/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) Within /members/images/, there will be a folder called jqueryui. Upload this folder to /members/images/ remotely.

4) Within your /members/js/ folder, there will be the files jquery.min.js and jquery-ui.min.js. Please upload these to your /members/js/ and /tour/js/ folder respectively.

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

Standard templates:
smarty0/gallery/gallery1.tpl
smarty0/gallery/playmovie.tpl
smarty0/general/page_top.tpl
smarty0/general/searchbar.tpl
smarty0/image/image1.tpl
smarty0/image/imagenav.tpl
smarty0/image.tpl
smarty0/tour1/episode_embedded.tpl
smarty0/tour1/episode_trailer.tpl
Mobile templates (if you have mobile)
smarty0_mobile/gallery/gallery1.tpl
smarty0_mobile/tour1/episode.tpl
smarty0_mobile/tour1/page_top.tpl
Tube Tour Templates
tube/tour1/episode_trailer.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/smarty_templates_desktop.zip

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

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

 

Common Pitfalls:

A guide to some of the most common upgrade pitfalls, and how to troubleshoot them, are here:

https://support.elevatedx.com/index.php?/Knowledgebase/Article/View/272/0/jw-player-upgrade-guide---common-pitfalls

 

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: smarty0/gallery/gallery1.tpl

Old Code:

{if (substr_count($item.Name[0],'flv') || substr_count($item.Name[0],'mp4') || substr_count($item.Name[0],'flash')) && !isset($fullplayName)} {assign var="fullplayName" value=$item}{/if}

New Code:

{if (substr_count($item.Name[0],'flv') || substr_count($item.Name[0],'mp4') || substr_count($item.Name[0],'flash') || substr_count($item.Name[0],'wmv')) && !isset($fullplayName)} {assign var="fullplayName" value=$item}{/if}

Old Code:

    <script src="jwplayer.js"></script>
    <script type="text/javascript">jwplayer.key="Ai4jB7+ua0L+B5Ib2yl8pej2kaz3Tkt8JLhB3WxeFBM=";</script>

    <script>
    {literal}
        jwplayer("mediaspacewc").setup({
            file: '{/literal}{$wc_url}{literal}',
            width: 960,
            height: 540,
            autostart: true
        });
    {/literal}
    </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" />

    <script>
    {literal}        
        txt = '<video width="960" height="540" id="mediabox" style="width: 100%; height: 100%;" '         
        txt = txt + '>';
        txt = txt + "\n" + '<source type="video/mp4" src="{/literal}{$wc_url}{literal}" />';
        txt = txt + '</video>';
    
        $("#mediaspacewc").html(txt);            
        $('#mediabox').mediaelementplayer({
            enablePluginSmoothing: true,
            success: function(media, node, player) {
                media.play();
            }
        });   
    {/literal}
    </script>


Changes in: smarty0/gallery/playmovie.tpl

Old Code:

{assign var="flashtypes" value=".flv,.f4v,.mp4,.mpeg4,.m4v,.m3u8,.webm"}

New Code:

{assign var="flashtypes" value=".flv,.f4v,.mp4,.mpeg4,.m4v,.m3u8,.webm,.wmv"}

Old Code:

{literal}
function jw_playerload()
{
    {/literal}
    var plg1_streamer = "{$templateconf.flashmoviestreamer}"
    var plg1_type     = "{$templateconf.flashmovietype}"
    
    var plg2_streamer = "{$templateconf.flashmp4streamer}"
    var plg2_type     = "{$templateconf.flashmp4type}"
    {literal}

    var hasFlash = false;
    try {
      var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
      if (fo) {
        hasFlash = true;
      }
    } catch (e) {
      if (navigator.mimeTypes
            && navigator.mimeTypes['application/x-shockwave-flash'] != undefined
            && navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin) {
        hasFlash = true;
      }
    }    
    
    // If FLV streamer is of type http and doesn't include a full http URL, add one
    if (plg1_type == "http")
    {
        if (!plg1_streamer.match(/^http/))
        {
            areaurl = "{/literal}{#areaurl#}{literal}"
            if (areaurl.match(/^http/))
            {
                plg1_streamer = areaurl + "/" + plg1_streamer;
            }
            else if (areaurl != "")
            {
                plg1_streamer = "http://" + window.location.hostname + "/" + "{/literal}{#areaurl#}{literal}" + plg1_streamer;
            }
        }
    }
    
    passobj = {}    
    var lst = [];
    var titl = ""
    wdth = 192;
    hdth = 144;
        
    for (var cntx=0; cntx < picarr.length; cntx++)
    {
        pa = picarr[cntx]

        wdth = Math.min(980, Math.max(wdth, parseInt(picarr[cntx][2])));
        hdth = Math.ceil(parseInt(picarr[cntx][3]) * (wdth) / parseInt(picarr[cntx][2]));
        
        if (pa[7] != '')
        {
            titl = pa[7];
        }
        else
        {
            titl = "Clip #" + (cntx+1);
        }
        
        flee = pa[1] + "";
        
        listitem = {}
        listitem.label = titl;

        if (pa[9])
        {
            passobj.tracks = [{
                    file: pa[9],
                    kind: "thumbnails"
                }];
        }

        if (useimage != "")
        {
            passobj.image = useimage;
        }
        else
        {
            passobj.image = pa[8]
        }
        
        if ((flee.split('.').pop() == "mp4" || flee.split('.').pop() == "m4v" || flee.split('.').pop() == "f4v"))
        {    
            fl_streamer = plg2_streamer;
            fl_type = plg2_type;
            rtmp_prefix = "mp4"
        }
        else if (flee.split('.').pop() == "flv")
        {
            fl_streamer = plg1_streamer;
            fl_type = plg1_type;
            rtmp_prefix = "flv"
        }
        else
        {
            fl_streamer = plg1_streamer;
            fl_type = plg1_type;
            rtmp_prefix = ""
        }

        if (fl_type == "lighttpd")
        {
            passobj.startparam = "start";
            listitem.file = flee;
        }
        else if (fl_type == "http" && (fl_streamer.indexOf("stream.php") != -1) && (rtmp_prefix == "flv"))
        {        
            listitem.file = fl_streamer + "?file=" + encodeURI(flee);
            passobj.startparam = "start";
            listitem.type = "flv"
        }
        else if (fl_type == "http")
        {
            console.log("Please contact CMS support to setup / configure pseudostreaming")
            listitem.file = flee;
        }
        else if (fl_type == "rtmp" && hasFlash)
        {
            listitem.file = fl_streamer + "/" + rtmp_prefix + ":" + flee;
        }
        else
        {
            listitem.file = flee;
        }
        
        lst[lst.length] = listitem;          
    }
        
    if (flashvar_arr["galleryautoplay"] == "0")
    {
        passobj.autostart = false;
    }
    else
    {
        passobj.autostart = true;
    }
    
    passobj.sources = lst;
    passobj.width = wdth;
    passobj.height = hdth;
    passobj.primary = "flash";
    // passobj.androidhls = true;
    
    {/literal}{if (isset($root.page.trial))}{literal}
    passobj.events = {'onComplete' : (function() {

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

        if (document.getElementById("postroll_url"))
        {
          document.getElementById("postroll_url").href = "{/literal}{$root.page.trial.VideoURL[0]}{literal}";
        }

    })};

    {/literal}{/if}{literal}
    
    ply = jwplayer("mediabox").setup(passobj);
        
    ply.onPlay(function() {
    
        if (this.getPosition() == "0")
        {
            pa = picarr[this.getPlaylistIndex()];    
        
            url = "stattrack.php?pagename=image&id=" + pa[0] + "&cg=" + pa[6] + "&type=" + pa[4] + "&mt=" + pa[5];
            $.get(url);
        }        
    });
}
{/literal}

New Code:

{literal}

extl = [];
extl["m4v"] = "video/mp4";
extl["m3u8"] = "application/x-mpegURL";

function jw_playerload()
{
    {/literal}
    var plg1_streamer = "{$templateconf.flashmoviestreamer}"
    var plg1_type     = "{$templateconf.flashmovietype}"
    
    var plg2_streamer = "{$templateconf.flashmp4streamer}"
    var plg2_type     = "{$templateconf.flashmp4type}"
    {literal}

    var hasFlash = false;
    try {
      var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
      if (fo) {
        hasFlash = true;
      }
    } catch (e) {
      if (navigator.mimeTypes
            && navigator.mimeTypes['application/x-shockwave-flash'] != undefined
            && navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin) {
        hasFlash = true;
      }
    }    
    
    // If FLV streamer is of type http and doesn't include a full http URL, add one
    if (plg1_type == "http")
    {
        if (!plg1_streamer.match(/^http/))
        {
            areaurl = "{/literal}{#areaurl#}{literal}"
            if (areaurl.match(/^http/))
            {
                plg1_streamer = areaurl + "/" + plg1_streamer;
            }
            else if (areaurl != "")
            {
                plg1_streamer = "http://" + window.location.hostname + "/" + "{/literal}{#areaurl#}{literal}" + plg1_streamer;
            }
        }
    }
    
    passobj = {}    
    var lst = [];
    var titl = ""
    wdth = 192;
    hdth = 144;
    var uimage = "";
    var started = 0;
        
    for (var cntx=0; cntx < picarr.length; cntx++)
    {
        pa = picarr[cntx]

        wdth = Math.min(980, Math.max(wdth, parseInt(picarr[cntx][2])));
        hdth = Math.ceil(parseInt(picarr[cntx][3]) * (wdth) / parseInt(picarr[cntx][2]));
        
        if (pa[7] != '')
        {
            titl = pa[7];
        }
        else
        {
            titl = "Clip #" + (cntx+1);
        }
        
        flee = pa[1] + "";
        
        listitem = {}
        listitem.label = titl;

        uimage = (useimage != "") ? useimage : pa[8];
        
        ext = flee.split('.').pop().split("?").shift();
        listitem.type = (extl[ext] != undefined) ? extl[ext] : "video/" + ext;
        
        if ((flee.split('.').pop() == "mp4" || flee.split('.').pop() == "m4v" || flee.split('.').pop() == "f4v"))
        {    
            fl_streamer = plg2_streamer;
            fl_type = plg2_type;
            rtmp_prefix = "mp4"
        }
        else if (flee.split('.').pop() == "m3u8")
        {
            fl_streamer = plg1_streamer;
            fl_type = plg1_type;
            rtmp_prefix = ""
        }
        else if (flee.split('.').pop() == "flv")
        {
            fl_streamer = plg1_streamer;
            fl_type = plg1_type;
            rtmp_prefix = "flv"
        }
        else if (flee.split('.').pop() == "wmv")
        {
            fl_streamer = plg2_streamer;
            fl_type = plg2_type;
            rtmp_prefix = "mp4"
        }
        else
        {
            fl_streamer = plg1_streamer;
            fl_type = plg1_type;
            rtmp_prefix = ""
        }
        
        if (fl_type == "lighttpd")
        {
            listitem.src = flee;
            passobj.enablePseudoStreaming = true;
        }
        else if (fl_type == "http" && (fl_streamer.indexOf("stream.php") != -1) && (rtmp_prefix == "flv"))
        {        
            listitem.src = fl_streamer + "?file=" + encodeURI(flee);
        }
        else if (fl_type == "http")
        {
        //    console.log("Please contact CMS support to setup / configure pseudostreaming")
            listitem.src = flee;
        }
        else if (fl_type == "rtmp" && hasFlash)
        {
            listitem.src = fl_streamer + "/" + rtmp_prefix + ":" + flee;
        }
        else
        {
            listitem.src = flee;
        }
        
        lst[lst.length] = listitem;          
    }

    try
    {
        txt = '<video width="' + wdth + '" height="' + hdth + '" id="mediabox_sub"'
        
        if (uimage != "" && flashvar_arr["galleryautoplay"] == "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 + '" />';
        }
        txt = txt + '</video>';
        
        // console.log(txt);
    
        $("#mediabox").html(txt);
        
        passobj.mode = "auto_plugin";
        passobj.enablePluginSmoothing = true;
        passobj.success = function(media, node, player) {
                
            media.addEventListener('play', function(e){

                if (started == 0)
                {    
                    for(i = 0; i < picarr.length; i++)
                    {    
                        if (media.src.contains(escape(picarr[i][1])))
                        {
                            url = "stattrack.php?pagename=image&id=" + picarr[i][0] + "&cg=";
                            url = url + picarr[i][6] + "&type=" + picarr[i][4] + "&mt=" + picarr[i][5];
                            $.get(url);
                            break;
                        }
                    }

                    started = 1;
                }
            });

            media.addEventListener('ended', function(e){
                started = 0;
            });
            
            if (flashvar_arr["galleryautoplay"] != "0")
            {
                media.play();
            }
            
            
            {/literal}{if $root.page.trial}{literal}
            
            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 = "{/literal}{$root.page.trial.VideoURL[0]}{literal}";
                }

            });
            
            {/literal}{/if}{literal}
        };
        
        $('#mediabox_sub').mediaelementplayer(passobj);        
    }
    catch(e)
    {
        alert(e)    
    }
    
}
{/literal}


Changes in: smarty0/general/page_top.tpl

Remove this code (if present):


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

Remove this code (if present):

{** Flash Code **}
<script type='text/javascript' src='jwplayer.js'></script>
<script type="text/javascript">jwplayer.key="Ai4jB7+ua0L+B5Ib2yl8pej2kaz3Tkt8JLhB3WxeFBM=";</script>
{** Silverlight Code **}
<script type='text/javascript' src='silverlight.js'></script>
<script type='text/javascript' src='wmvplayer.js'></script>

Add this code in its place (even if above is not present):

<!-- These are MediaElements.js includes -->
<script src="js/mp/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="js/mp/mediaelementplayer.min.css" />

Remove this code (if present):

<!-- AutoComplete -->
<script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.autocomplete.css" />

Add this code in its place (even if above is not present):

<!-- jQuery-UI -->
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="./images/jqueryui/jquery-ui.min.css" />

Replace instances of:

<script type="text/javascript" src="js/jquery-1.3.4.min.js"></script>

With:

<script type="text/javascript" src="js/jquery.min.js"></script>

(In this case, any time there's a version number within the jquery library, replace it with one without one).

 

 

Changes in: smarty0/general/searchbar.tpl

Old Code:

 Anything that appears within a <script>...</script> tag.

New Code:

<script>
{literal}

$().ready(function()
{
    $("#autosuggest").autocomplete({
      source: function(req, add){
        $.get('search_ajax.php?q=' + req.term, function(data) {

            arrStor = [];

            arrLabel = new Array();
            arrURL   = new Array();
            var arg= data.split("\n");

            for(var i=0; i < arg.length; i++)
            {
                ix = arg[i].split("|");

                if (ix.length == 2)
                {
                    arrStor[arrStor.length] = {label:ix[0].trim(), value:ix[1].trim()}
                }
                
                if (arrStor.length >= 15) break;
            }

            add(arrStor);
        });
      }
    });


});
{/literal}
</script>


Changes in: smarty0/image/image1.tpl

Old Code:

{foreach from=$root.page.contenttypesub.type item=contenttype}

{if $root.page.settype[0] == "vids" && $root.page.mediatype_attr[0].value == $contenttype.Name[0]}
  {assign var="mtt" value=$contenttype}

  {if (
         $mtt.Pattern[0]|@contains:'flv' ||
         $mtt.Pattern[0]|@contains:'mp4' ||
         $mtt.Pattern[0]|@contains:'m4v'
        )}
        {assign var="flasht" value=1}
  {/if}
{/if}
{/foreach}

{** check if the Media Type is flv or Flash **}
{foreach from=$root.page.mediatype_attr item="mitem"}
    {if (
         $mitem.value|@contains:'flv'   ||
         $mitem.value|@contains:'flash' ||
         $mitem.value|@contains:'mp4'   ||
         $mitem.value|@contains:'mpeg4' ||
         $mitem.value|@contains:'m4v'   ||
         $flasht == '1'
        )}
        {assign var="flashmovie" value=1}
    {/if}
{/foreach}

New Code:

{foreach from=$root.page.contenttypesub.type item=contenttype}

{if $root.page.settype[0] == "vids" && $root.page.mediatype_attr[0].value == $contenttype.Name[0]}
  {assign var="mtt" value=$contenttype}

  {if (
         $mtt.Pattern[0]|@contains:'flv' ||
         $mtt.Pattern[0]|@contains:'mp4' ||
         $mtt.Pattern[0]|@contains:'m4v' ||
         $mtt.Pattern[0]|@contains:'wmv'
        )}
        {assign var="flasht" value=1}
  {/if}
{/if}
{/foreach}

{** check if the Media Type is flv or Flash **}
{foreach from=$root.page.mediatype_attr item="mitem"}
    {if (
         $mitem.value|@contains:'flv'   ||
         $mitem.value|@contains:'flash' ||
         $mitem.value|@contains:'mp4'   ||
         $mitem.value|@contains:'mpeg4' ||
         $mitem.value|@contains:'m4v'   ||
         $mitem.value|@contains:'wmv'   ||
         $flasht == '1'
        )}
        {assign var="flashmovie" value=1}
    {/if}
{/foreach}


Changes in: smarty0/image/imagenav.tpl

Old Code:

                {if $root.page.settype[0] == $root.page.movietabs.item[0]}
                    
                {else}
                    < {$templateconf.txtprevious}&nbsp;{$templateconf.txtPhoto}
                {/if}

New Code:

                {if $root.page.settype[0] == $root.page.movietabs.item[0]}
                    < {$templateconf.txtprevious}
                {else}
                    < {$templateconf.txtprevious}&nbsp;{$templateconf.txtPhoto}
                {/if}

Old Code:

                {if $root.page.settype[0] == $root.page.movietabs.item[0]}
                    
                {else}
                    {$templateconf.txtnext}&nbsp;{$templateconf.txtPhoto}>
                {/if}

New Code:

                {if $root.page.settype[0] == $root.page.movietabs.item[0]}
                    {$templateconf.txtnext}&nbsp;>
                {else}
                    {$templateconf.txtnext}&nbsp;{$templateconf.txtPhoto}>
                {/if}


Changes in: smarty0/image.tpl

Old Code:

{assign var="flashtypes" value=".flv,.f4v,.mp4,.mpeg4,.m4v,.m3u8,.webm"}

New Code:

{assign var="flashtypes" value=".flv,.f4v,.mp4,.mpeg4,.m4v,.m3u8,.webm,.wmv"}

Old Code:

{literal}
    function jw_playerload()
    {
        {/literal}
        var plg1_streamer = "{$templateconf.flashmoviestreamer}"
        var plg1_type     = "{$templateconf.flashmovietype}"
        
        var plg2_streamer = "{$templateconf.flashmp4streamer}"
        var plg2_type     = "{$templateconf.flashmp4type}"
        {literal}

    
    
        ld = -1;
    
        dc = document.location + ''
        dc = dc.substr(0,7) + dc.substr(7, dc.indexOf('/',7)-7) + '/'


        if (plg1_type == "http")
        {
            if (!plg1_streamer.match(/^http/))
            {
                areaurl = "{/literal}{#areaurl#}{literal}"
                if (areaurl.match(/^http/) && areaurl != "")
                {
                    plg1_streamer = areaurl + "/" + plg1_streamer;
                }
                else if(areaurl != "")
                {
                    plg1_streamer = "http://" + window.location.hostname + "/" + "{/literal}{#areaurl#}{literal}" + plg1_streamer;
                }
            }
        }
    
        passobj = {}    
        var lst = [];
        var titl = ""
        wdth = 320;
        hdth = 240;
        barwidth= 205;    
    
        parx = []
    
        {/literal}
        {assign var="clippos" value="0"}
    
        {foreach from=$root.page.content.item item="item" key="ki"}
        {foreach from=$item.Files.file_attr item="itemf" key="kf"}
        {if $itemf.name == $root.page.mediatype_attr[0].value}
        {assign var="clippos" value=$clippos+1}
        {if !isset($root.page.trial) || (in_array($clippos, $root.page.trial.AccessClips.page) || $root.page.trial.AccessClips.page[0] == 0 || in_array($root.page.contentgroup.Id[0], $root.page.trial.AllowRecent.Id))}
    
            {assign var="position" value=$ki+1}    
            {assign var="tmpfile1" value=""}
            {assign var="vtt_file" value=""}

            {if $cms_pro && $item.Files.file_attr[$kf].vtt_file}
                {capture assign="vtt_file"}{#contentdir#}/upload/{$root.page.contentgroup.Directory[0]}/{$item.Files.file_attr[$kf].vtt_file}{/capture}
            {/if}
            
    
            {if $itemf.sourcetype == $root.page.settype[0] && $itemf.name=='thumb' }
                {assign var="tmpfile1" value=$item.Files.file[$kf]}
            {/if}

            {if $tmpfile1 == ""}
                {foreach from=$item.Files.file_attr item="itemf2" key="k3"}
                    {if $itemf2.name == 'thumb' and $itemf2.cname=='Large Video Thumbnails' }
                        {assign var="tmpfile1" value=$item.Files.file[$k3]}
                    {/if}
                {/foreach}
            {/if}

            {if $tmpfile1 == ""}
                {foreach from=$item.Files.file_attr item="itemf2" key="k3"}
                    {if $itemf2.name == 'thumb' and $itemf2.cname=='Video Thumbnails' }
                        {assign var="tmpfile1" value=$item.Files.file[$k3]}
                    {/if}
                {/foreach}
            {/if}
            
            {assign var="useimage" value=""}
            
            {foreach from=$root.page.contentgroup.PreviewXML.element.item_attr item=itm}
             {if $itm.priority == 9}
              {if $itm.2x_width != 0}
                {capture assign="fldr"}{math equation="floor(x / 100 % 100)" x=$itm.Id format="%02d"}/{math equation="x % 100" x=$itm.Id format="%02d"}{/capture}
                {capture assign="useimage"}{#contentdir#}/contentthumbs/{$fldr}/{$itm.Id}-2x.{$itm.Extension}{/capture}
              {else}
                {capture assign="useimage"}{#contentdir#}/contentthumbs/{$itm.Id}.{$itm.Extension}{/capture}
              {/if}
             {/if}
            {/foreach}
            
            parx[parx.length] = {literal}{{/literal}
                id: {$item.Id[0]},
                file: "{#contentdir#}/upload/{$root.page.contentgroup.Directory[0]}/{$item.Files.file[$kf]}".replace("//", "/"),
                title: "Clip {$clippos}",
                {if $useimage}
                image: dc + "/{$useimage}",
                {elseif $tmpfile1}
                image: dc + "/{#contentdir#}/upload/{$root.page.contentgroup.Directory[0]}/{$tmpfile1}",
                {/if}
                {if $vtt_file}
                vtt_file: "{$vtt_file}",
                {/if}
                width: parseInt('{$item.Files.file_attr[$kf].movie_width}'),
                height: parseInt('{$item.Files.file_attr[$kf].movie_height}'),
                cg: "{$root.page.contentgroup.Id[0]}",
                mt: "{$root.page.mediatype_attr[0].value}",
                type: "{$root.page.settype[0]}"
            {literal}}{/literal}
        {/if}
        {/if}
        {/foreach}  
        {/foreach}
        {literal}    


        for(i = 0; i < parx.length; i++)
        {
            parxx = parx[i];
            ld = (id == parxx.id) ? i : ld;
        
            listitem = {}
            listitem.title = parxx.title;
            if (parxx.image)
            {
                listitem.image = parxx.image;
            }
            

            
            wdth = Math.max(wdth, parxx.width)
            hdth = Math.max(hdth, parxx.height)

            if ((parxx.file.split('.').pop() == "mp4" || parxx.file.split('.').pop() == "m4v" || parxx.file.split('.').pop() == "f4v"))
            {    
                fl_streamer = plg2_streamer;
                fl_type = plg2_type;
                rtmp_prefix = "mp4"
            }
            else
            {
                fl_streamer = plg1_streamer;
                fl_type = plg1_type;
                rtmp_prefix = "flv"
            }
            
            if (parxx.vtt_file)
            {
                listitem.tracks = [{
                        file: parxx.vtt_file,
                        kind: "thumbnails"
                    }];
            }
            
            if (fl_type == "lighttpd")
            {
                passobj.startparam = "start";
                listitem.file = parxx.file;
            }
            else if (fl_type == "http" && (fl_streamer.indexOf("stream.php") != -1))
            {        
                listitem.file = fl_streamer + "?file=" + encodeURI(parxx.file);
                passobj.startparam = "start";
                listitem.type = "flv"
            }
            else if (fl_type == "http")
            {
                console.log("Please contact CMS support to setup / configure pseudostreaming")
                listitem.file = parxx.file;
            }
            else if (fl_type == "rtmp")
            {                
                listitem.file = fl_streamer + "/" + rtmp_prefix + ":" + parxx.file;
            }
            else
            {
                listitem.file = parxx.file;
            }
                
            lst[lst.length] = listitem;
        }

        // Now do all of the setup stuff.

        if (flashvar_arr["galleryautoplay"] == "0")
        {
            passobj.autostart = false;
        }
        else
        {
            passobj.autostart = true;
        }
        
        passobj.playlist = lst;
        passobj.width = wdth;
        passobj.height = hdth;
        passobj.primary = "flash";
        // passobj.androidhls = true;
        
        if (lst.length > 1)
        {
            passobj.listbar = {
                position: 'right',
                size: barwidth
            }
        }
        else
        {
            barwidth = 0;
        }
    
        if (wdth+barwidth > 980)
        {
            hdth = hdth * (980-barwidth) / wdth;
            wdth = 980-barwidth;
        }
            
        passobj.width = wdth + barwidth;
        passobj.height = hdth;
        
        ply = jwplayer("mediabox").setup(passobj);
        if (ld != -1)
        {
            jwplayer("mediabox").playlistItem(ld);
        }
            
        ply.onPlay(function() {
        
            if (this.getPosition() == "0")
            {
                url = "stattrack.php?pagename=image&id=" + parxx.id + "&cg=" + parxx.cg + "&type=" + parxx.type + "&mt=" + parxx.mt;
                $.get(url);
            }        
        });
    
    }

    </script>
    {/literal}

New Code:

{literal}

extl = [];
extl["m4v"] = "video/mp4";
extl["m3u8"] = "application/x-mpegURL";

    function jw_playerload()
    {
        {/literal}
        var plg1_streamer = "{$templateconf.flashmoviestreamer}"
        var plg1_type     = "{$templateconf.flashmovietype}"
        
        var plg2_streamer = "{$templateconf.flashmp4streamer}"
        var plg2_type     = "{$templateconf.flashmp4type}"
        {literal}

    
    
        ld = -1;
    
        dc = document.location + ''
        dc = dc.substr(0,7) + dc.substr(7, dc.indexOf('/',7)-7) + '/'


        if (plg1_type == "http")
        {
            if (!plg1_streamer.match(/^http/))
            {
                areaurl = "{/literal}{#areaurl#}{literal}"
                if (areaurl.match(/^http/) && areaurl != "")
                {
                    plg1_streamer = areaurl + "/" + plg1_streamer;
                }
                else if(areaurl != "")
                {
                    plg1_streamer = "http://" + window.location.hostname + "/" + "{/literal}{#areaurl#}{literal}" + plg1_streamer;
                }
            }
        }
    
        passobj = {}    
        var lst = [];
        var titl = ""
        wdth = 320;
        hdth = 240;
        started = 0
        uimage = "";
    
        parx = []
    
        {/literal}
        {assign var="clippos" value="0"}
    
        {foreach from=$root.page.content.item item="item" key="ki"}
        {foreach from=$item.Files.file_attr item="itemf" key="kf"}
        {if $itemf.name == $root.page.mediatype_attr[0].value}
        {assign var="clippos" value=$clippos+1}
        {if !isset($root.page.trial) || (in_array($clippos, $root.page.trial.AccessClips.page) || $root.page.trial.AccessClips.page[0] == 0 || in_array($root.page.contentgroup.Id[0], $root.page.trial.AllowRecent.Id))}
    
            {assign var="position" value=$ki+1}    
            {assign var="tmpfile1" value=""}
            {assign var="vtt_file" value=""}

            {if $cms_pro && $item.Files.file_attr[$kf].vtt_file}
                {capture assign="vtt_file"}{#contentdir#}/upload/{$root.page.contentgroup.Directory[0]}/{$item.Files.file_attr[$kf].vtt_file}{/capture}
            {/if}
            
    
            {if $itemf.sourcetype == $root.page.settype[0] && $itemf.name=='thumb' }
                {assign var="tmpfile1" value=$item.Files.file[$kf]}
            {/if}

            {if $tmpfile1 == ""}
                {foreach from=$item.Files.file_attr item="itemf2" key="k3"}
                    {if $itemf2.name == 'thumb' and $itemf2.cname=='Large Video Thumbnails' }
                        {assign var="tmpfile1" value=$item.Files.file[$k3]}
                    {/if}
                {/foreach}
            {/if}

            {if $tmpfile1 == ""}
                {foreach from=$item.Files.file_attr item="itemf2" key="k3"}
                    {if $itemf2.name == 'thumb' and $itemf2.cname=='Video Thumbnails' }
                        {assign var="tmpfile1" value=$item.Files.file[$k3]}
                    {/if}
                {/foreach}
            {/if}
            
            {assign var="useimage" value=""}
            
            {foreach from=$root.page.contentgroup.PreviewXML.element.item_attr item=itm}
             {if $itm.priority == 9}
              {if $itm.2x_width != 0}
                {capture assign="fldr"}{math equation="floor(x / 100 % 100)" x=$itm.Id format="%02d"}/{math equation="x % 100" x=$itm.Id format="%02d"}{/capture}
                {capture assign="useimage"}{#contentdir#}/contentthumbs/{$fldr}/{$itm.Id}-2x.{$itm.Extension}{/capture}
              {else}
                {capture assign="useimage"}{#contentdir#}/contentthumbs/{$itm.Id}.{$itm.Extension}{/capture}
              {/if}
             {/if}
            {/foreach}
            
            parx[parx.length] = {literal}{{/literal}
                id: {$item.Id[0]},
                file: "{#contentdir#}/upload/{$root.page.contentgroup.Directory[0]}/{$item.Files.file[$kf]}".replace(/([^:])\/\//g, "$1/"),
                title: "Clip {$clippos}",
                {if $useimage}
                image: dc + "/{$useimage}",
                {elseif $tmpfile1}
                image: dc + "/{#contentdir#}/upload/{$root.page.contentgroup.Directory[0]}/{$tmpfile1}",
                {/if}
                {if $vtt_file}
                vtt_file: "{$vtt_file}",
                {/if}
                width: parseInt('{if $item.Files.file_attr[$kf].movie_width}{$item.Files.file_attr[$kf].movie_width}{else}320{/if}'),
                height: parseInt('{if $item.Files.file_attr[$kf].movie_height}{$item.Files.file_attr[$kf].movie_height}{else}240{/if}'),
                cg: "{$root.page.contentgroup.Id[0]}",
                mt: "{$root.page.mediatype_attr[0].value}",
                type: "{$root.page.settype[0]}"
            {literal}}{/literal}
        {/if}
        {/if}
        {/foreach}  
        {/foreach}
        {literal}    


        for(i = 0; i < parx.length; i++)
        {
            parxx = parx[i];
            ld = (id == parxx.id) ? i : ld;
        
            listitem = {}
            listitem.title = parxx.title;
            if (parxx.image)
            {
                uimage = parxx.image;
            }
            
            wdth = Math.max(wdth, parxx.width)
            hdth = Math.max(hdth, parxx.height)
            
            ext = parxx.file.split('.').pop().split("?").shift();
            listitem.type  = (extl[ext] != undefined) ? extl[ext] : "video/" + ext;

            if ((parxx.file.split('.').pop() == "mp4" || parxx.file.split('.').pop() == "m4v" || parxx.file.split('.').pop() == "f4v"))
            {    
                fl_streamer = plg2_streamer;
                fl_type = plg2_type;
                rtmp_prefix = "mp4"
            }
            else if (parxx.file.split('.').pop() == "m3u8")
            {
                fl_streamer = plg1_streamer;
                fl_type = plg1_type;
                rtmp_prefix = ""
            }
            else if (parxx.file.split('.').pop() == "wmv")
            {
                fl_streamer = plg1_streamer;
                fl_type = plg1_type;
                rtmp_prefix = ""
            }
            else
            {    
                fl_streamer = plg1_streamer;
                fl_type = plg1_type;
                rtmp_prefix = "flv"
            }
            
            eps = false;
            
            if (fl_type == "lighttpd")
            {
                listitem.src = parxx.file;
                eps = true;
            }
            else if (fl_type == "http" && (fl_streamer.indexOf("stream.php") != -1) && (parxx.file.split('.').pop() == "flv"))
            {        
                listitem.src = fl_streamer + "?file=" + encodeURI(parxx.file);
            }
            else if (fl_type == "http")
            {
                console.log("Please contact CMS support to setup / configure pseudostreaming")
                listitem.src = parxx.file;
            }
            else if (fl_type == "rtmp")
            {                
                listitem.src = fl_streamer + "/" + rtmp_prefix + ":" + parxx.file;
            }
            else
            {
                listitem.src = parxx.file;
            }
                
            lst[lst.length] = listitem;
        }

        // Now do all of the setup stuff.

        if (flashvar_arr["galleryautoplay"] == "0")
        {
            passobj.autostart = false;
        }
        else
        {
            passobj.autostart = true;
        }
            
        if (wdth > 980)
        {
            hdth = Math.floor(hdth * 980 / wdth);
            wdth = 980;
        }
        
        prevcss = (ld == 0) ? "nav_hid" : "nav_vis"
        nextcss = (ld == lst.length - 1) ? "nav_hid" : "nav_vis"
        
        $("#gal_prevpage").attr("class", prevcss)
        $("#gal_nextpage").attr("class", nextcss);
        $("#gal_prevpage_bot").attr("class", prevcss)
        $("#gal_nextpage_bot").attr("class", nextcss);

        try
        {
            txt = '<video width="' + wdth + '" height="' + hdth + '" id="mediabox_sub"'
            
            if (uimage != "")
            {
                txt = txt + ' poster="' + uimage + '" ';
            }
            
            txt = txt + '>';
            for(i = 0; i < lst.length; i++)
            {                
                if (ld == -1 || ld == i)
                {
                    txt = txt + "\n" + '<source type="' + lst[i].type + '" src="' + lst[i].src + '" />';
                }
            }
            txt = txt + '</video>';

            $("#mediabox").html(txt);
            
            $('#mediabox_sub').mediaelementplayer({
                mode:'auto_plugin',
                enablePseudoStreaming: eps,
                enablePluginSmoothing: true,
                
                success: function(media, node, player) {
                    
                    media.addEventListener('play', function(e){
    
                        if (started == 0)
                        {                        
                            url = "stattrack.php?pagename=image&id=" + parxx.id + "&cg=" + parxx.cg + "&type=" + parxx.type + "&mt=" + parxx.mt;
                            $.get(url);
    
                            started = 1;
                        }
                    });
    
                    media.addEventListener('ended', function(e){
                        started = 0;
                    });
                    
                    if (flashvar_arr["galleryautoplay"] != "0")
                    {
                        media.play();
                    }
                    
                    
                    {/literal}{if $root.page.trial}{literal}
                    
                    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 = "{/literal}{$root.page.trial.VideoURL[0]}{literal}";
                        }
    
                    });
                    
                    {/literal}{/if}{literal}
                }
            });        
        }
        catch(e)
        {
            alert(e)    
        }
        
        
    }

    </script>
    {/literal}


Changes in: smarty0/tour1/episode_embedded.tpl

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


Changes in: smarty0/tour1/episode_trailer.tpl

Old Code:

{if $root.page.current.trailer_url[0] != ""}
<div align="center">
{if ($root.page.current.trailer_url[0]|@strstr:".mp4" == ".mp4") || ($root.page.current.trailer_url[0]|@strstr:".mov" == ".mov") || ($root.page.current.trailer_url[0]|@strstr:".flv" == ".flv")}

 <script src="jwplayer.js"></script>
 <script type="text/javascript">jwplayer.key="Ai4jB7+ua0L+B5Ib2yl8pej2kaz3Tkt8JLhB3WxeFBM=";</script>
 <div id="preview"><div id="jwbox"></div></div>

 <!-- HIDDEN PROMO FORM -->
 <div id="hpromo" style="width:960px; height:540px; display:none;" align="center">{$templateconf.trailerjoin}</div>
     <script>
    {literal}
        function playTrailer(){
    
            lmt = getCookieTLimit(ctlimit_name)
            remaining = maxClicks - lmt;
            
            if (document.getElementById("clicksremaining"))
            {
                document.getElementById("clicksremaining").innerHTML = remaining
            }
    
            document.getElementById('hpromo').style.display = 'none';
            document.getElementById('preview').style.visibility = 'visible';
            document.getElementById('preview').style.display = '';        
    
        
            jwplayer("jwbox").setup({
                file: "{/literal}{$root.page.current.trailer_url[0]}{literal}",
                width: 960,
                height: 540,
                primary: "flash",
                autostart: true,
                'events': {
                    onComplete: function(e) {
                        document.getElementById('preview').style.display = 'none';
                        document.getElementById('hpromo').style.display = 'block';
                    }
                }
            });
        }
        function replay(){
            document.getElementById('hpromo').style.display = 'none';
            document.getElementById('preview').style.visibility = 'visible';
    
            ret = tlimit();
            if (ret == true)
            {
                  {/literal}playTrailer();{literal}
              }
        }
    
        ret = tlimit();
        if (ret == true)
        {
              {/literal}playTrailer();{literal}
          }
    {/literal}
     </script>
{elseif $root.page.current.trailer_url[0]|@strstr:".wmv" == ".wmv"}
 <script src="silverlight.js"></script>
 <script src="wmvplayer.js"></script>
 <div id="preview"></div>
 <script>

  {literal}
  ret = tlimit();
  if (ret == true)
  {
  {/literal}

    var wdth = "640"
    var hdth = "500"
    var imgg = "{$root.page.current.trailer_url[0]}"
    var inht = "";

    {literal}
    if (Silverlight.isInstalled("1.0"))
    {
        var p_src = 'wmvplayer.xaml';
        var p_cfg = {width:wdth,height:hdth,file:imgg,autostart:'true'};
        var ply = new jeroenwijering.Player(document.getElementById("preview"),p_src,p_cfg);
    }
    else
    {
        var inht = "";

        if (document.all) // IE
        {
         inht += "<object id='mediabox' ";
         inht += "classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95' ";
         inht += "codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701' ";
         inht += "standby='Loading Microsoft Windows Media Player components...' ";
         inht += "type='application/x-oleobject' width='"+wdth+"' height='"+hdth+"''> ";
         inht += "<param name='fileName' value=\""+imgg+"\"/> ";
         inht += "<param name='animationatStart' value='true' /> ";
         inht += "<param name='transparentatStart' value='true' /> ";
         inht += "<param name='autoStart' value=\"true\" /> ";
         inht += "<param name='showControls' value=\"true\" /> ";
         inht += "<param name=\"ShowStatusBar\" value=\"true\" /> ";
         inht += "<param name='loop' value=\"0\" /> ";
         inht += "</object>"
        }
        else
        {
        // Code for anything but IE.
    
         inht += "<object classid=\"CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95\" width=\""+wdth+"\" height=\""+hdth+"\" type=\"application/x-oleobject\" >"
         inht += "<param name=\"fileName\" value=\""+imgg+"\">"
         inht += "<param name=\"autostart\" value=\"1\">"
         inht += "<param name=\"ShowStatusBar\" value=\"true\" /> ";
         inht += "<param name='showControls' value=\"true\" /> ";
         inht += "<param name=\"volume\" value=\"0\">"
         inht += "<EMBED type=\"application/x-mplayer2\" pluginspage = \"http://www.microsoft.com/Windows/MediaPlayer/\" "
         inht += "SRC=\""+imgg+"\" name=\"MediaPlayer1\" width=\""+wdth+"\" "
         inht += "height=\""+hdth+"\" AutoStart=\"true\" ShowStatusBar=\"1\" ShowControls=\"1\"></EMBED>"
         inht += "</object>"
        }

        document.getElementById("preview").innerHTML = inht
    }


    {/literal}



  {literal}
  }
  {/literal}

 </script>
{elseif $root.page.current.trailer_url[0]|@strstr:".jpg" == ".jpg"}
 <a href="{$root.page.tour.JoinUrl}"><img border="0" src="{$root.page.current.trailer_url[0]}" /></a>
{/if}

</div>
{/if}

New Code:

{if $root.page.current.trailer_url[0] != ""}
<div align="center">
{if $root.page.current.trailer_url[0]|@strstr:".jpg" == ".jpg"}
<a href="{$root.page.tour.JoinUrl}"><img border="0" src="{$root.page.current.trailer_url[0]}" /></a>
{elseif ($root.page.current.trailer_url[0])}

 <script src="js/jquery.min.js"></script>
 <script src="js/mp/mediaelement-and-player.min.js"></script>
 <link rel="stylesheet" href="js/mp/mediaelementplayer.min.css" />
 <div id="preview"><div id="mediaspace"></div></div>

 <!-- HIDDEN PROMO FORM -->
 <div id="hpromo" style="width:960px; height:540px; display:none;" align="center">{$templateconf.trailerjoin}</div>
     <script>
    {literal}
        function playTrailer(){
    
            lmt = getCookieTLimit(ctlimit_name)
            remaining = maxClicks - lmt;
            
            if (document.getElementById("clicksremaining"))
            {
                document.getElementById("clicksremaining").innerHTML = remaining
            }
    
            document.getElementById('hpromo').style.display = 'none';
            document.getElementById('preview').style.visibility = 'visible';
            document.getElementById('preview').style.display = '';        
    
            ext = "{/literal}{$root.page.current.trailer_url[0]}{literal}".split('.').pop().split("?").shift();
        
            txt = '<video width="960" height="540" id="mediabox">';
            txt = txt + "\n" + '<source type="video/' + ext + '" src="{/literal}{$root.page.current.trailer_url[0]}{literal}" />';
            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){
                        document.getElementById('preview').style.display = 'none';
                        document.getElementById('hpromo').style.display = 'block';
                    });
                }
            });  
        }
        function replay(){
            document.getElementById('hpromo').style.display = 'none';
            document.getElementById('preview').style.visibility = 'visible';
    
            ret = tlimit();
            if (ret == true)
            {
                  {/literal}playTrailer();{literal}
              }
        }
    
        ret = tlimit();
        if (ret == true)
        {
              {/literal}playTrailer();{literal}
          }
    {/literal}
     </script>
{/if}

 

Mobile Template Changes (if you have mobile):

Changes in: smarty0_mobile/gallery/gallery1.tpl

Old Code:

<script type='text/javascript' src="jwplayer.js"></script>
<script type="text/javascript">jwplayer.key="Ai4jB7+ua0L+B5Ib2yl8pej2kaz3Tkt8JLhB3WxeFBM=";</script>

<script>

try
{
    // starting the script on page load
    $(document).ready(function(){

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

</script>

New Code:

<script src="js/jquery.min.js"></script>
<script src="js/mp/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="js/mp/mediaelementplayer.min.css" />

<script>
extl = [];
extl["m4v"] = "video/mp4";
extl["m3u8"] = "application/x-mpegURL";

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.");
        }
    });
}
catch(e)
{
  alert("Warning: File js/jquery.min.js not found.");
}

</script>

Old Code:

{literal}
<script>

function playmovie(fle, imgg, changeloc, autoplay, wdth, hdth)
{
    if (changeloc == 1)
    {
        $('html,body').animate({scrollTop: $("#playertag").offset().top},'slow');
    }

    if (autoplay == "1")
    {
        aup = true;
    }
    else
    {
        aup = false;
    }

    $("#mediaplayer").show();

    passobj = {};
    passobj.file = fle;
    if (imgg != '')
    {
        passobj.image = imgg;
    }
    
    passobj.width = parseInt($(".content_wrapper").width());
    passobj.height = parseInt($(".content_wrapper").width() * hdth / wdth);
    passobj.autostart = aup;
    
    passobj.primary = "flash";
    // passobj.androidhls = true;

    jwplayer('mediaplayer').setup(passobj);

}

$(window).resize(function() {

    if ( $("#mediaplayer").length )
    {    
        jw_wdth = jwplayer('mediaplayer').getWidth();
        jw_hdth = jwplayer('mediaplayer').getHeight();
    
        wdth = parseInt($(".content_wrapper").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);
        }
    }

    

});


</script>
{/literal}

New Code:

{literal}
<script>

function playmovie(fle, imgg, changeloc, autoplay, wdth, hdth)
{
    if (imgg == undefined) imgg = "";
    if (changeloc == undefined) changeloc = 1;
    if (autoplay == undefined) autoplay = 0;
    if (wdth == undefined) wdth = 320;
    if (hdth == undefined) hdth = 240;
    
    if (changeloc == 1)
    {
        $('html,body').animate({scrollTop: $("#playertag").offset().top},'slow');
    }

    $("#mediaplayer").show();

    w = parseInt($(".content_wrapper").width());
    h = parseInt($(".content_wrapper").width() * hdth / wdth);

    try
    {
        txt = '<video width="' + w + '" height="' + h + '" id="mediabox" style="width: 100%; height: 100%;" '
        
        if (imgg != "")
        {
            txt = txt + ' poster="' + imgg + '" ';
        }
        
        ext = fle.split('.').pop().split("?").shift();
        usetype  = (extl[ext] != undefined) ? extl[ext] : "video/" + ext;
        
        txt = txt + '>';
        txt = txt + "\n" + '<source type="' + usetype + '" src="' + fle + '" />';
        txt = txt + '</video>';
        
        // console.log(txt);
    
        $("#mediaplayer").html(txt);
        
        $('#mediabox').mediaelementplayer({
            mode:'auto_plugin',
            enablePluginSmoothing: true,
            
            success: function(media, node, player) {
                                
               if (autoplay == 1)
               {
                    media.play();   
               }                 
            }
        });        
    }
    catch(e)
    {
        alert(e)    
    }
}
</script>
{/literal}

Old Code:

            {literal}
            picarr = []
            
            $(document).ready(function() {
            
                $("#mediaplayer").show();
            
                passobj = {}    
                var lst = [];
                var titl = ""
                    
                for (var cntx=0; cntx < picarr.length; cntx++)
                {
                    pa = picarr[cntx]
                    listitem = {}
            
                    if (pa.label)
                    {
                        listitem.label = pa.label;
                    }
                    
                    if (pa.image)
                    {
                        passobj.image = pa.image;
                    }
            
                    listitem.file = pa.file;
            
                    if (pa.vtt)
                    {
                        passobj.tracks = [{
                                file: pa.vtt,
                                kind: "thumbnails"
                            }];
                    }
                    
                    lst[lst.length] = listitem;          
                }
                    
                passobj.autostart = false;
                
                passobj.sources = lst;
                
                if (picarr.length)
                {                
                    passobj.width = parseInt($(".content_wrapper").width());
                    passobj.height = parseInt($(".content_wrapper").width() * picarr[0].height / picarr[0].width);
                }
                
                passobj.primary = "flash";
                //passobj.androidhls = true;
                
                if (lst.length)
                {
                    jwplayer("mediaplayer").setup(passobj);
                }
            });
            {/literal}

New Code:

            <script>
            {literal}
            picarr = []
            
            $(document).ready(function() {

                $("#mediaplayer").show();

                passobj = {}
                var lst = [];
                var titl = ""
                var uimage = "";

                for (var cntx=0; cntx < picarr.length; cntx++)
                {
                    pa = picarr[cntx]
                    listitem = {}

                    if (pa.image)
                    {
                        uimage = pa.image;
                    }

                    listitem.src = pa.file;
                    ext = pa.file.split('.').pop().split("?").shift();
                    listitem.type  = (extl[ext] != undefined) ? extl[ext] : "video/" + ext;

                    lst[lst.length] = listitem;
                }

                if (picarr.length)
                {
                    wdth = parseInt($(".content_wrapper").width());
                    hdth = parseInt($(".content_wrapper").width() * picarr[0].height / picarr[0].width);
                }

                if (lst.length)
                {

                    try
                    {
                        txt = '<video width="' + wdth + '" height="' + hdth + '" id="mediabox" style="width: 100%; height: 100%;" '
                        
                        if (uimage != "")
                        {
                            txt = txt + ' poster="' + uimage + '" ';
                        }
                        
                        txt = txt + '>';
                        for(i = 0; i < lst.length; i++)
                        {
                            txt = txt + "\n" + '<source type="' + lst[i].type + '" src="' + lst[i].src + '" />';
                        }
                        txt = txt + '</video>';
                        
                        // console.log(txt);
                    
                        $("#mediaplayer").html(txt);
                        
                        $('#mediabox').mediaelementplayer({
                            mode:'auto_plugin',
                            enablePluginSmoothing: true                            
                        });        
                    }
                    catch(e)
                    {
                        alert(e)    
                    }

                }
            });
            {/literal}


Changes in: smarty0_mobile/tour1/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({
                enablePluginSmoothing: true
            });        
        }
        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: smarty0_mobile/tour1/page_top.tpl

Old Code:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type='text/javascript' src="jwplayer.js"></script>
<script type="text/javascript">jwplayer.key="Ai4jB7+ua0L+B5Ib2yl8pej2kaz3Tkt8JLhB3WxeFBM=";</script>
<script type='text/javascript' src="js/mobileinclude.js"></script>

<script src="js/helper.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); }
        
        StdImageHandler();
        
    });
}
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 src="js/helper.js"></script>
<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); }
        
        StdImageHandler();
        
    });
}
catch(e)
{
  alert("Warning: File js/jquery.min.js not found.");
}
{/literal}
</script>

Tube Tour Changes:

Changes in: tube/tour1/episode_trailer.tpl

Old Code:

{if $root.page.current.trailer_url[0] != ""}
<div align="center">
{if ($root.page.current.trailer_url[0]|@strstr:".mp4" == ".mp4") || ($root.page.current.trailer_url[0]|@strstr:".mov" == ".mov") || ($root.page.current.trailer_url[0]|@strstr:".flv" == ".flv")}

<script src="jwplayer.js"></script>
<script type="text/javascript">jwplayer.key="Ai4jB7+ua0L+B5Ib2yl8pej2kaz3Tkt8JLhB3WxeFBM=";</script>
 
<script>
{literal}
// starting the script on page load
$(document).ready(function(){

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

});
{/literal}
</script>

 <div id="preview"><div id="jwbox"></div></div>

New Code:

{if $root.page.current.trailer_url[0] != ""}
<div align="center">
{if $root.page.current.trailer_url[0]|@strstr:".jpg" == ".jpg"}
<a href="{$root.page.tour.JoinUrl}"><img border="0" src="{$root.page.current.trailer_url[0]}" /></a>
{elseif ($root.page.current.trailer_url[0])}

<script src="js/mp/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="js/mp/mediaelementplayer.min.css" />
 
<script>
{literal}
// 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.");
    }

});
{/literal}
</script>
 
 <div id="preview"><div id="mediaspace"></div></div>

Old Code:

        
            jwplayer("jwbox").setup({
                file: "{/literal}{$root.page.current.trailer_url[0]}{literal}",
                width: 960,
                height: 540,
                primary: "flash",
                autostart: true,
                'events': {
                    onComplete: function(e) {
                        document.getElementById('preview').style.display = 'none';
                        document.getElementById('hpromo').style.display = 'block';
                    }
                }
            });

New Code:

            ext = "{/literal}{$root.page.current.trailer_url[0]}{literal}".split('.').pop().split("?").shift();
    
            txt = '<video width="960" height="540" id="mediabox">';
            txt = txt + "\n" + '<source type="video/mp4" src="{/literal}{$root.page.current.trailer_url[0]}{literal}" />';
            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){
                        document.getElementById('preview').style.display = 'none';
                        document.getElementById('hpromo').style.display = 'block';
                    });
                }
            }); 

Removed Code (Optional):

{elseif $root.page.current.trailer_url[0]|@strstr:".wmv" == ".wmv"}
 <script src="silverlight.js"></script>
 <script src="wmvplayer.js"></script>
 
<script>
{literal}
// starting the script on page load
$(document).ready(function(){

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

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

});
{/literal}
</script>
 
 <div id="preview"></div>
 <script>

  {literal}
  ret = tlimit();
  if (ret == true)
  {
  {/literal}

    var wdth = "640"
    var hdth = "500"
    var imgg = "{$root.page.current.trailer_url[0]}"
    var inht = "";

    {literal}
    if (Silverlight.isInstalled("1.0"))
    {
        var p_src = 'wmvplayer.xaml';
        var p_cfg = {width:wdth,height:hdth,file:imgg,autostart:'true'};
        var ply = new jeroenwijering.Player(document.getElementById("preview"),p_src,p_cfg);
    }
    else
    {
        var inht = "";

        if (document.all) // IE
        {
         inht += "<object id='mediabox' ";
         inht += "classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95' ";
         inht += "codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701' ";
         inht += "standby='Loading Microsoft Windows Media Player components...' ";
         inht += "type='application/x-oleobject' width='"+wdth+"' height='"+hdth+"''> ";
         inht += "<param name='fileName' value=\""+imgg+"\"/> ";
         inht += "<param name='animationatStart' value='true' /> ";
         inht += "<param name='transparentatStart' value='true' /> ";
         inht += "<param name='autoStart' value=\"true\" /> ";
         inht += "<param name='showControls' value=\"true\" /> ";
         inht += "<param name=\"ShowStatusBar\" value=\"true\" /> ";
         inht += "<param name='loop' value=\"0\" /> ";
         inht += "</object>"
        }
        else
        {
        // Code for anything but IE.
    
         inht += "<object classid=\"CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95\" width=\""+wdth+"\" height=\""+hdth+"\" type=\"application/x-oleobject\" >"
         inht += "<param name=\"fileName\" value=\""+imgg+"\">"
         inht += "<param name=\"autostart\" value=\"1\">"
         inht += "<param name=\"ShowStatusBar\" value=\"true\" /> ";
         inht += "<param name='showControls' value=\"true\" /> ";
         inht += "<param name=\"volume\" value=\"0\">"
         inht += "<EMBED type=\"application/x-mplayer2\" pluginspage = \"http://www.microsoft.com/Windows/MediaPlayer/\" "
         inht += "SRC=\""+imgg+"\" name=\"MediaPlayer1\" width=\""+wdth+"\" "
         inht += "height=\""+hdth+"\" AutoStart=\"true\" ShowStatusBar=\"1\" ShowControls=\"1\"></EMBED>"
         inht += "</object>"
        }

        document.getElementById("preview").innerHTML = inht
    }


    {/literal}

  {literal}
  }
  {/literal}

 </script>
{elseif $root.page.current.trailer_url[0]|@strstr:".jpg" == ".jpg"}
 <a href="{$root.page.tour.JoinUrl}"><img border="0" src="{$root.page.current.trailer_url[0]}" /></a>

 



Attachments 
 
(0 vote(s))
Helpful
Not helpful

Comments (0)