Dynamic loading of jwplayer or any js file

Question

I want to load jwplayer dynamically using jquery or javascript. I want to do this because the browser on which FLASH is not installed jwplayer in not behaving as expected.

Hence I want to check first whether flash player is installed or not into the browser if yes than only I want to load jwplayer.To check flash installed or not i m using below

var hashFlash=((typeof navigator.plugins != "undefined" && typeof navigator.plugins["Shockwave Flash"] == "object") || (window.ActiveXObject && (new ActiveXObject("ShockwaveFlash.ShockwaveFlash")) != false));

if hashFlash is true than only i will load jwplayer to play video/audio.

I am using below code to load jwplayer dynamically.

function loadjwplayer(filename) {
    var fileref=document.createElement('script');
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", filename);
    alert(fileref);
    document.getElementsByTagName("head")[0].appendChild(fileref);
}

OR through jquery as below

$.getScript("/jwplayer/jwplayer.js");

After that i will add audio/video player into the we page as per requirement using below.

function load_jwplayer_skin( div_id, audio_file) { 
    jwplayer(div_id).setup({
                      file: audio_file,
                      flashplayer: "/jwplayer/jwplayer.flash.swf",    
                      primary: "flash",
                      width: "350", 
                      height: "25", 
                    });
}

and use it into html as below

<div id='audio_1'>......</div>
<script>
load_jwplayer_skin('audio_1','my_fev_song.mp3');
</script>

But I am getting below error "Uncaught Referenceerror: Jwplayer is not defined inside function load_jwplayer_skin ".

The same is working fine if I load jwplayer using ..... at head of the page.Hence it seems me that jwplayer is not available in global scope.

Please someone suggest me how to proceed.

Unknown Unknown · Accepted Answer · 2013-06-29T12:38:50

Try this:

function load_jwplayer_skin(div_id, audio_file) {
  if(!jwplayer) {
    if(!load_jwplayer_skin.oldCalls) {
      load_jwplayer_skin.oldCalls = [];
    }
    return load_jwplayer_skin.oldCalls.push({divId: div_id, file: audio_file});
  }
  else {

    load_jwplayer_skin.oldCalls.push({divId: div_id, file: audio_file});

    var oldCalls = load_jwplayer_skin.oldCalls,
    oldCallsLen = oldCalls.length,
    i = 0;

    for(i; i < oldCallsLen; i++) {
      var oldCall = oldCalls[i];
      doLoadJWPlayerSkin(oldCall.divId, oldCall.file);
    }

    delete load_jwplayer_skin.oldCalls;

    load_jwplayer_skin = doLoadJWPlayerSkin;
  }
}

function doLoadJWPlayerSkin(divId, audioFile) {
  jwplayer(divId).setup({
    file : audioFile,
    flashplayer : "/jwplayer/jwplayer.flash.swf",
    primary : "flash",
    width : "350",
    height : "25",
  });
}

It works like this, if jwplayer is not ready, the arguments were pushed in to an array. Once jwplayer is ready, it loops through all the items in the array & calls the original loader doLoadJWPlayerSkin. And finally, load_jwplayer_skin = doLoadJWPlayerSkin; ensures that, future calls to load_jwplayer_skin are directed to doLoadJWPlayerSkin.

That's it.

Update:

When browser starts to read a html file, it starts to render the html contents. If it encounters a script block, it immediately executes it(This is where, your issue spawns). If it encounters a script with src attribute, browser tells to some other component(you have to research it) to load the script & continues to load the rest of the page.

I guess with that details, you would understand what goes wrong where & why.

I will try to explain it here.

In your html you add code to load jwplayer, lets assume that, the code is in head block.
Browser informs to some other component to load the script & continues with its html parsing job.
Now it encounters a script block & it executes the script(because, it is the nature of browser)
That script block utilizes jwplayer.
Assume, that jwplayer is not loaded yet.
So, you got the error that, jwplayer is undefined.

With my approach(Actually, something like that is widely used in different forms)

If jwplayer is not loaded yet, the code just stores the arguments in an array.
You have many script blocks which calls load_jwplayer_skin function.
So, down the timeline, when jwplayer is ready & from some other script block you call load_jwplayer_skin, that time, load_jwplayer_skin calls doLoadJWPlayerSkin with each of the previous arguments stored in the array.
Finally it assigns doLoadJWPlayerSkin to load_jwplayer_skin. So, future calls to load_jwplayer_skin will directly execute doLoadJWPlayerSkin. Actually this is some form of lazy initialization.

There is one problem with my approach; that is -

Assume you started to load jwplayer & all the load_jwplayer_skin function calls are executed before jwplayer loads. Now nothing will happen.

For this kind of scenario, I use events personally. But you could just do like this, use jQuery to load the script & in the callback of .getScript call load_jwplayer_skin once. In other places just call load_jwplayer_skin. Try this out, I am sure that your problem will be solved. If you want anything to be clarified, I here.

Good Luck!

Dynamic loading of jwplayer or any js file

1 Answers

Update: