When upgrading to the new media player, you may see that the player doesn't load. The first thing you should do in this case is open up the JavaScript console.
In Firefox, you can go to Tools -> Web Developer -> Browser Console.
You'll have a new window pop up here. You'll want to make sure the following is set on top:
- Make sure Net is not highlighted (click on it if it is to unhighlight it)
- Make sure CSS is not highlighted (click on it if it is to unhighlight it)
- Make sure JS IS highlighted (Click on it if it is NOT to highlight it)
At this point, press "Clear". Then go to your browser and reload the page.
Here are some common errors that will prevent the video player from loading:
TypeError: $(...).mediaelementplayer is not a function
In this case, the system is not finding mediaelement.js. You'll need to make sure:
1) An include is included on this page that calls mediaelement.js
<!-- These are MediaElements.js includes -->
<script src="js/mp/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="js/mp/mediaelementplayer.min.css" />
2) Make sure the js/mp files exist within the folder, and can be loaded.
ReferenceError: $ is not defined
In this case, jQuery is not being loaded.
You'll need to make sure:
1) jQuery is being called from this page:
<!-- JQuery include -->
<script type="text/javascript" src="js/jquery.min.js"></script>
2) js/jquery.min.js exists and can be loaded.
Note: MediaElement.js requires a newer version of jquery (e.g 1.10 or greater). Older versions of the software may not work with this
The time rail at the bottom of my player window is only 180px wide:
OR
The maximize button on the player does not work.
In this case, you will need to update your jQuery library to 1.10 or greater in order to solve this issue).
You can grab a copy of jquery.min.js from the latest 3.2 templates. It should be within /members/js. Be sure to change your general/page_top.tpl to point to the new template.
Note: This may cause problems with the autocomplete.js library if available. See solution below.
Any error that's autocomplete related.
In this case, you'll need to remove any includes that reference autocomplete.js:
<!-- AutoComplete -->
<script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.autocomplete.css" />
This will need to be removed. We recommend replacing this with jQuery-ui:
<!-- 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" />
You'll need to make sure both js/jquery-ui.min.js and the images/jqueryui folder are available.
Next, you'll need to make sure the location that uses autocomplete is replaced. In most smarty installs, this is general/searchbar.tpl. Replace any JavaScript in this template with this:
<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>
