Gacek Gacek - 3 months ago 62
Javascript Question

videojs player + google IMA ads - how to subscribe for an event

I'm trying to run some test code using

video.js
player with google IMA plugin

I used a simple example provided by the plugin's authors:
https://github.com/googleads/videojs-ima/tree/master/examples/simple

And now I try to subscribe for some of the ads-player events.

I tried to subscribe for the events in following way (changes in lines 48+ of the original sample code):

player.one(startEvent, function() {

player.ima.onAdStarted_ = function(){
console.log("Ad started");
}

player.ima.onAdPlayPauseClick_ = function(){
console.log("Ad clicked");
}

player.ima.onAdComplete_ = function(){
console.log("Ad completed");
}

player.ima.initializeAdDisplayContainer();
player.ima.requestAds();
player.play();
});


And it captures the events correctly, but the main player is broke: after the ad is finished the IMA controls are not being disabled (they overlay the controls of the main player) and we have no control over the video.

I assume I accidently overrided some of the IMA's events and it's not working properly.

I also tried to add event listeners like that:

player.one(startEvent, function() {


player.ima.initializeAdDisplayContainer();
player.ima.addEventListener("click",function(){
console.log("Ad clicked");
});

player.ima.addEventListener(google.ima.AdEvent.Type.STARTED,function(){
console.log("Ad started");
});

player.ima.addEventListener(google.ima.AdEvent.Type.ALL_ADS_COMPLETED, function(){
console.log("Ad completed");
});
player.ima.requestAds();
player.play();
});


But it's not working.

Is there a proper way to subscribe for the IMA's events, mainly for "ad started", "ad clicked" and "ad ended" events?

Answer

OK, I managed to solve my problem.

The trick is to rewrite the plugin located in videojs-ima.js file and there one has access to all needed events of adsManager and adsLoader objects.

I.e. (code added at line 208):

adsManager.addEventListener(
    google.ima.AdEvent.Type.STARTED,
    function(){
         console.log("Ad started");
    });