启用线性展示广告

同源

如果 IMA SDK 与内容播放器具有相同的来源，请执行以下任一操作：

• 首选：将视频播放器传入 AdsManagerLoadedEvent.getAdsManager() 调用。虽然 getAdsManager() 允许您传递包含 currentTime 属性的对象，但您必须将 HTMLVideoElement 实例传递到 getAdsManager() 中，才能支持内容检测。

  function onAdsManagerLoaded(adsManagerLoadedEvent) {
    // Set any AdsRenderingSettings here.
    const adsRenderingSettings = new google.ima.AdsRenderingSettings();
  
    // Get the ads manager.
    adsManager =
      adsManagerLoadedEvent.getAdsManager(videoElement, adsRenderingSettings);
  }
  

• 如果您无法在 AdsManagerLoadedEvent.getAdsManager() 调用期间提供内容播放器，请使用视频播放器调用 AdsManager.configureAdsManager() 方法。为了使内容检测功能正常运行，它必须是 HTMLVideoElement。

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager =
    adsManagerLoadedEvent.getAdsManager(null);
  adsManager.configureAdsManager(videoElement);
}

如果您未设置内容检测，Google 广告服务器可能会停止投放线性展示广告。

如果内容播放器与您加载 IMA SDK 的来源相同，则您无需对 IMA 实现进行任何更改即可处理更改内容播放器或停止内容信号收集。

跨域

如果 IMA SDK 与内容播放器跨域，IMA 可以通过 CrossOriginProxy 类收集内容检测信号。借助此类，IMA SDK 可以验证线性展示广告展示位置是否正确，并收集与视频内容主题相关的信号。如果您将 IMA SDK 放置在跨网域 iframe 中，则必须实现 CrossOriginProxy 类。

如果您继续将内容播放器与 IMA SDK 跨域放置，而不实现 CrossOriginProxy 类，Google 广告服务器可能会停止投放线性展示广告。

如需将 CrossOriginProxy 类加载到应用中，请执行以下操作：

1. 在 HTML 文件中，导入 ima_proxy.js 文件：

   <html>
     <head>
       <title>IMA HTML5 cross-origin iframe sample</title>
       <link rel="stylesheet" href="style.css">
     </head>
   
     <body>
       <div id="mainContainer">
         <div id="content">
           <video id="contentElement">
             <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
           </video>
         </div>
   
         <!-- The cross-origin iframe where you load IMA SDK and play ads. -->
         <iframe id="adContainerIframe"
                 src="https://cross-origin-domain.com/ads-sandbox.html" >
         </iframe>
   
       </div>
       <button id="playButton">Play</button>
   
       <script src="//imasdk.googleapis.com/js/sdkloader/ima_proxy.js"></script>
       <script src="main.js"></script>
     </body>
   </html>
   

2. 在 main.js 文件中，获取 CrossOriginProxy 实例。

3. 使用在您的网页或应用中展示广告的所有视频播放器的数组调用 setVideoElements() 方法。

在发出广告请求之前，您必须通过 setVideoElements() 调用将视频元素传递给 CrossOriginProxy 实例。以下示例传递了一个包含单个内容视频播放器的数组：

// On window load attach an event to the play button click
// that triggers playback of the content video element.
window.addEventListener('load', function(event) {
videoContent = document.getElementById('contentElement');
ima.crossOriginProxy.getInstance().setVideoElements([videoContent]);
playButton = document.getElementById('playButton');
playButton.addEventListener('click', playAds);
});

更改内容视频播放器

如果您更改或添加了其他内容视频播放器，则必须向 setVideoElements() 方法传递一个新数组。当您发出新的 setVideoElements() 调用时，IMA 会开始为新的内容播放器收集信号，并停止为之前调用中传递的所有内容播放器收集信号。

以下示例将新的视频元素传递给 CrossOriginProxy 类：

function createNewContentPlayer(newPlayerId) {
newVideoContent = document.getElementById(newPlayerId);
ima.crossOriginProxy.getInstance().setVideoElements([newVideoContent]);

// Continue with any other steps needed to initiate the content player
}

广告播放完毕后停止收集信号

当您播放完广告并调用 AdsLoader.destroy() 方法时，还必须使用空数组调用 setVideoElements() 方法。使用空数组发出 setVideoElements() 调用会丢弃对 IMA 持有的内容播放器的引用，并防止出现内存泄漏问题。