videojs public method access outside ready function and IE

Question

I built a player on top of videoJS and I'm having trouble accessing public functions inside videoJS .ready(). The thing is that my code appears to be working everywhere except IE (works in chrome, safari, ff, etc.):

var myPlayer = _V_('myvideojsId');
myPlayer.ready(function() {
    var player = this;
    player.myPublicFunction = function() {
        alert("hey!");
    }
});

myPlayer.myPublicFunction();

In IE I get

Object does not support this property or method

on the myPlayer.myPublicFunction() line. Are the other browsers letting me get away with bad code or is this IE's fault?

Any help would be great, thank you!

Chris

Answer 1

This is likely a problem with timing:

myPlayer.ready(function() {});
myPlayer.myPublicFunction();

Your first line here hands off a function to myPlayer to call whenever the player is ready. This doesn't happen immediately in most cases, so there is most likely a delay. This means your public function isn't added to the myPlayer object immediately, but rather this task will be accomplished whenever the video player is ready.

All of this means that when JavaScript moves on to the second line, the appropriate response from a browser is that the method doesn't exist - because it doesn't. It won't exist until the video player is ready, which isn't until later.

You could use more of a feature-detection approach, and only call the method if it exists:

if (myPlayer.myPublicFunction) {
    myPlayer.myPublicFunction();
}

You could also just add the method before-hand:

myPlayer.myPublicFunction = function () { alert("Foo"); };
myPlayer.ready(callback);
myPlayer.myPublicFunction(); // 'Foo'

In the end, I've found that Internet Explorer is not as forgiving (which is good) as some other browsers. If it's acting up today, it's likely because there's a problem in the code.

Answer 2

Referencing their documentation, it shows exactly what Jonathan has said: https://github.com/zencoder/video-js/blob/master/docs/api.md#wait-until-the-player-is-ready

He's right about IE by the way. As much as we all love to hate it, it has found real issues for me many times.

Just for quicker reference, here's an alternative to your method to getting this done:

_V_("example_video_1").ready(function(){

  var myPlayer = this;

  // EXAMPLE: Start playing the video.
  myPlayer.play();

});