使用 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!');});
...
}
...
大功告成！无论广告是否正在播放，您只要点击视频，都会看到弹出式窗口，并且点击广告时仍可正常使用。
试试看
您可以在下方查看有效的实现。