How to remove a event handler from JWPlayer instance?

Question

I'm the using JWPlayer. After setup the player I need to add listeners to some events, to give an example I listen to events.JWPLAYER_MEDIA_TIME like so:

jwplayer('video-container').onTime(this.onTimeHandler);

After a while I need to remove this event listener, reading the documentation I couldn't find any solution.

Classieclassification

have you tried jwplayer('video-container').onTime(null); ?? – Readily

hi @yogi, it doesn't work. The jwplayer.onTime() is bindding a function to an event, I can't find a way to remove this bind... – Classieclassification

Answer 1

Looking at the code, it doesn't seem possible to remove an event listener: a callback is pushed onto an array when you call onTime (or any of the other methods to setup event handlers), so calling it a second time doesn't overwrite a previous listener but just adds a new listener to the array.

Perhaps an alternative could be to set a flag once your listener doesn't have to perform its task anymore:

onTimeHandler : function() {
  if (! this.handleOnTimeEvents)
    return;
  ...
}

Sandasandakan

Thank you @robertklep, that's what I'm doing atm, but I needed to find a way to remove the listener completely, it doesn't look pretty if you add several listeners to onTime (that are called about 10 times a second) and keep adding global flags that will prevent the code from executing. As said it_works != is_pretty ;) (voted up for the enfort to give a working solution) – Classieclassification

Answer 2

Here is how I handled it. create a pseudo function whose sole purpose is to be a pointer. I was concerned with the onComplete event, so I wrote the code like so below:

function createJWPlayer(surl, stitle, autos, pw, ph) {
    jwplayer("videocontainer").setup({
        file: surl,
        title: stitle,
        width: pw,
        height:  ph,
        autostart: autos,
        stretching: "uniform",
        skin: "/Scripts/JWPlayer/six.xml"
    });
    jwplayer().onComplete(function (e) {
            jwcompleteevent(e);
        });
}

function jwcompleteevent(e) {
    // method to remain empty, sole purpose is to provide a pointer for the handler
}

Then in the function where I created it, I wrote this:

var mcomplete = (selobj.HasQ == false) ? InterActNoTimeAutoS : jwpCompleteInterA;
createJWPlayer(selobj.Upath, ti.TestTitle, true, "100%", "100%");
jwcompleteevent = mcomplete;

If I needed to load another video, I would do this

mcomplete = (selobj.HasQ == false) ? InterActNoTimeAutoS : jwpCompleteInterA;
jwcompleteevent = mcomplete;
loadJwPlayerUrl(selobj.Upath, true);

If anyone sees a problem with this, please tell me, it seems to be working as needed in the development environment

Pliant