javascriptvideo.jsgoogle-ima

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?


Solution

  • 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");
        });