啟用線性多媒體廣告

IMA HTML5 SDK 除了支援線性影片廣告，也支援線性多媒體廣告。如要進一步瞭解線性影片廣告，請參閱「影片廣告解決方案廣告總覽」。

啟用線性多媒體廣告後，線性多媒體廣告會與線性影片廣告競爭廣告空間，因此可提高廣告空間的廣告需求。IMA 會處理線性多媒體廣告的顯示，但您必須設定影片內容偵測。導入 IMA 內容偵測功能的方式，取決於您是在與廣告播放器相同的來源框架中建立內容播放器，還是在跨源框架中建立廣告播放器。

本指南說明如何設定內容偵測功能，以啟用線性多媒體廣告、變更內容影片播放器，以及停止收集內容信號。

設定內容偵測

如要為廣告請求啟用線性多媒體廣告，請按照下列步驟操作：

相同來源

如果 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 類別載入應用程式，請按照下列步驟操作：

在 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>

在 main.js 檔案中，取得 CrossOriginProxy 例項。
呼叫 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 保留的內容播放器參照，並防止記憶體流失問題。