使用 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!');});
...
}
...
大功告成！無論廣告是否正在播放，您都可以按下影片來查看彈出式視窗，但廣告是否仍能點閱廣告。
立即體驗
您可以在下方查看實際執行的方式。