Question

I built the website http://www.ordinarypeopleofficial.com using WordPress and the theme "Gleam" from the suite Elegant Themes. This theme is very complex. It heavily uses JavaScript. It has a 700 code lines long file called custom.js, which manages the whole website using AJAX.

For this reason I couldn't include the JavaScript code to load the jPlayer into the PHP script, but I needed to put it into a separate JavaScript file and call this file from custom.js.

In custom.js I added the following lines, which include my file named chiama-player.js into the <head> tag:

var html_doc = document.getElementsByTagName('head').item(0);
var js = document.createElement('script');
js.setAttribute('language', 'javascript');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', "/wp-content/themes/Gleam/chiama-player.js");
html_doc.appendChild(js);

The file named chiama-player.js contains the code to instantiate the jPlayer:

$(document).ready(function() {
if(window.location.href=="http://www.ordinarypeopleofficial.com/#!/le-canzoni/" || window.location.href=="http://www.ordinarypeopleofficial.com/le-canzoni/"){
    $("#jp_container_1").css( { 'display': 'block' } );
    $("#jquery_jplayer_1").jPlayer( {
        ready: function () {
            $(this).jPlayer("setMedia", {
                m4a: "http://www.ordinarypeopleofficial.com/wp-content/themes/Gleam/shakeit.m4a",
            });
        },
        swfPath: "http://www.ordinarypeopleofficial.com/wp-content/themes/Gleam/jplayer",
        supplied: "m4a"
    });
}
else{
    $("#jp_container_1").css( { 'display': 'none' } );
}
});

THE PROBLEM: Everything works GREAT on the browsers, which support M4A.

The problem comes with Firefox. Firefox does not support M4A, so it needs the Flash fallback to work. When I try to load the page on Firefox, I see that the swfPath is correctly recognized (in fact if I alter the path and I type some random text, I see a 404 in the Net panel).

The problem is that the request GET Jplayer.swf never gets a result and keeps loading for hours without getting the file.

Was it helpful?

Solution

Into the file custom.js, at the end of the function et_init_scripts() I did the following steps:

  1. I removed the lines I wrote, so I don't call my file chiama-player.js anymore
  2. I copied the content of the file jquery.jplayer.min.js and pasted it all. (I know, it's horrible, but it works.)
  3. Right after these lines I copied the content of chiama-player.js (which creates the jPlayer).
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top