跟踪鼠标点击

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

前提条件

• 集成了 IMA HTML5 SDK 的 HTML5 视频播放器。如果没有，请参阅我们的入门指南。

修改 HTML

首先，您需要更改 HTML，以添加一个封装了这两者的 div 广告播放器和内容视频播放器。在入门指南中，已经使用了 通过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!');});
  ...
}
...

大功告成！无论点击什么 确定广告是否正在播放，是否仍可实现广告点击。

试试看

您可在下方看到有效的实现代码。