javascript - videojs 播放器 + google IMA 广告 - 如何订阅事件

Question

我正在尝试使用 video.js 播放器和谷歌运行一些测试代码 IMA plugin

我使用了插件作者提供的一个简单示例: 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

TLDR;

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

---

此解决方案未记录，您的代码不起作用，因为当您添加事件监听器时，adsManager 尚未创建。查看 googleads/videojs-ima 存储库中的以下代码段。

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

为了能够在广告管理器上添加事件监听器，必须监听 adsready 事件，因为它是在广告管理器创建结束时发出的，请查看以下代码段。

// 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 ima 广告事件，您必须添加事件监听器 after adsready 事件发出如下。

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