视频播放器+谷歌IMA广告-如何订阅活动

Question

我试图使用video.js player和google IMA插件运行一些测试代码

我使用了插件作者提供的一个简单示例：https://github.com/googleads/videojs-ima/tree/master/examples/simple

现在我试着订阅一些广告播放器活动。

我尝试以以下方式订阅事件(原始示例代码的48+行中的更改)：

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();
});

它正确地捕捉了事件，但是主播放器被打破了:广告完成后，IMA控件没有被禁用(它们覆盖了主播放器的控件)，而我们没有对视频的控制。

我想我无意中夸大了IMA的一些事件，而且它没有正常工作。

我还尝试添加这样的事件侦听器：

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();
});

但这不管用。

是否有适当的方式订阅IMA的事件，主要是“广告开始”、“广告点击”和“广告结束”事件？

Answer 1

好吧，我解决了我的问题。

诀窍是重写位于videojs-ima.js文件中的插件，这样就可以访问adsManager和adsLoader对象所需的所有事件。

即(第208行添加的代码)：

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

Answer 2

TLDR;

player.on("adsready", function(){
  player.ima.addEventListener(google.ima.AdEvent.Type.CLICK, function(){
    console.log(">>> ad clicked");
  });
});

这个解决方案是没有文档的，您的代码无法工作，因为当您添加事件侦听器时，还没有创建adsManager。看看googleads/videojs存储库中的以下代码片段。

// https://github.com/googleads/videojs-ima/blob/master/src/videojs.ima.js#L758-L769
player.ima.addEventListener = function(event, callback) {
  if (adsManager) {
    adsManager.addEventListener(event, callback);
  }
};

要想在ads管理器上添加事件侦听器，必须侦听adsready事件，因为它是在ads管理器创建结束时发出的，请看下面的片段。

// https://github.com/googleads/videojs-ima/blob/master/src/videojs.ima.js#L219-L278
player.ima.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  adsManager = adsManagerLoadedEvent.getAdsManager(
      contentPlayheadTracker, adsRenderingSettings);

  // other code
  // ...

  player.trigger('adsready');
};

因此，要侦听google广告事件，必须在 adsready事件之后添加事件侦听器adsready，如下所示。

player.on("adsready", function(){
  player.ima.addEventListener(google.ima.AdEvent.Type.CLICK, function(){
    console.log(">>> ad clicked");
  });
});