跟踪鼠标点击

使用 IMA SDK 时，有两个单独的视频播放器，即内容视频播放器和广告播放器。SDK 会自动管理将广告播放器叠加在内容视频播放器上。因此，直接向视频播放器添加事件监听器是行不通的。一种解决方法是显示和隐藏广告容器，但这可能会干扰 SDK 功能。更好的解决方案是将两个玩家封装在父 div 中，并将事件监听器附加到该父 div。本指南将介绍具体方法。

前提条件

  • 集成了 IMA HTML5 SDK 的 HTML5 视频播放器。如果您还没有 IMA SDK，请参阅设置 IMA SDK。

修改 HTML

首先，您需要更改 HTML 以添加一个同时封装广告播放器和内容视频播放器的 div。在“设置 IMA SDK”中，系统已使用 mainContainer 为您完成此操作：

...
<div id="mainContainer">
  <div id="content">
    <video id="contentElement">
      <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4">
    </video>
  </div>

  <div id="adContainer"></div>
</div>
...

向 JavaScript 添加事件监听器

接下来，向 JavaScript 代码添加事件监听器，例如用于检测用户点击视频。例如，在 ads.js 中： 

...
function init() {
  videoContent = document.getElementById('contentElement');
  mainContainer = document.getElementById('mainContainer');
  mainContainer.addEventListener('click', function() { alert('I was clicked!');});
  ...
}
...

大功告成！无论是否有广告在播放，您都可以点击视频，然后看到弹出式窗口，并且广告点击仍会有效。

试试看

您可以在下方查看一个可正常运行的实现。