IMA SDK 可讓您輕鬆將多媒體廣告整合至網站和應用程式。IMA SDK 可向任何 符合 VAST 規範的廣告伺服器請求廣告，並管理應用程式中的廣告播放。應用程式可透過 IMA DAI SDK，針對廣告和內容影片 (隨選影片或直播內容) 提出串流請求。接著，SDK 會傳回合併的影片串流，因此您不必在應用程式中管理廣告和內容影片之間的切換。
選取偏好的 DAI 解決方案：
- 使用全套服務 DAI 進行設定：Google Ad Manager 會選取廣告，並直接插入內容串流。
- 使用廣告連播放送 DAI 進行設定：Google Ad Manager 提供可拼接或載入至影片播放器的廣告連播。
播放透過 Google Cloud Video Stitcher API 註冊的 VOD 串流
本指南說明如何使用 HTML5 適用的 IMA DAI SDK，請求及播放 Google Cloud 隨選影片串流工作階段。
本指南將進一步說明 IMA DAI 入門指南中的基本範例。
如要瞭解如何與其他平台整合，或使用 IMA 用戶端 SDK，請參閱「互動式媒體廣告 SDK」。
如要查看或按照完整的整合範例操作，請下載 HLS 或 DASH 的 Cloud Video Stitcher 範例。
設定 Google Cloud 專案
設定 Google Cloud 雲端專案，並設定服務帳戶來存取專案。
輸入下列變數，以便在 IMA SDK 中使用：- 位置
- 建立 VOD 設定的 Google Cloud 區域：
LOCATION - 專案編號
- 使用 Video Stitcher API 的 Google Cloud 雲端專案編號：
PROJECT_NUMBER - OAuth 權杖
具備 Video Stitcher 使用者角色的服務帳戶短期 OAuth 權杖：
OAUTH_TOKEN
進一步瞭解如何建立短期 OAuth 權杖。只要 OAuth 權杖未過期，就能在多個要求中重複使用。
- 聯播網代碼
請求廣告的 Ad Manager 聯播網代碼：
NETWORK_CODE
- VOD 設定 ID
VOD 串流的 VOD 設定 ID：
VOD_CONFIG_ID如要進一步瞭解如何建立 VOD 設定 ID，請參閱雲端拼接建立 VOD 設定指南。
設定開發環境
IMA 範例應用程式只會示範 HLS 串流請求。建構 VideoStitcherVodStreamRequest 類別時，您仍可使用 DASH 串流。設定與 DASH 相容的播放器時，您需要為影片播放器的進度事件設定事件監聽器，以便將影片的中繼資料提供給 StreamManager.processMetadata()。這個函式需要三個參數：
type：這個字串必須設為'ID3'(適用於 HLS 串流) 和'urn:google:dai:2018'(適用於 DASH 串流)。data：如果是 DASH 事件訊息，這是訊息資料字串。timestamp：DASH 串流的事件訊息開始時間。
只要播放器事件提供中繼資料，就應盡快且盡可能頻繁地傳送。如果中繼資料遺失或不正確，IMA DAI SDK 可能不會觸發廣告事件，導致廣告事件回報不正確。
下載 HTML5 的 IMA DAI 範例，並將 hls_js/simple 範例 ZIP 檔案解壓縮至新資料夾。這個範例是網頁應用程式，您可以在本機託管，用於測試。
如要在本機託管範例，請前往新資料夾，然後執行下列 Python 指令，啟動網路伺服器：
python3 -m http.server 8000http.server 僅適用於 Python 3.x。您可以使用任何其他網路伺服器，例如 Apache HTTP Server 或 Node JS。
開啟網路瀏覽器並前往 localhost:8000，即可看到影片播放器。
瀏覽器必須支援 HLS.js 程式庫。
如果一切正常，點按影片播放器的「播放」按鈕，就會開始播放短片《鋼鐵之淚》，且每 30 秒會插播廣告。
要求 VOD 串流
如要將範例串流替換為已拼接廣告的 VOD 串流，請使用 VideoStitcherVodStreamRequest 類別，透過 Google Ad Manager 自動建立廣告工作階段。您可以使用 Google Ad Manager 使用者介面找出產生的 DAI 工作階段，以便監控及偵錯。
在現有範例中，有要求 VOD 串流或直播的函式。如要搭配 Google Cloud Video Stitcher API 使用，您必須新增函式，傳回 VideoStitcherVodStreamRequest 物件。
範例如下：
// StreamManager which will be used to request DAI streams.
let streamManager;
...
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(
videoElement,
adUiElement
);
streamManager.addEventListener(
[
google.ima.dai.api.StreamEvent.Type.LOADED,
google.ima.dai.api.StreamEvent.Type.ERROR,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
],
onStreamEvent, false);
hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
if (streamManager && data) {
// For each ID3 tag in our metadata, we pass in the type - ID3, the
// tag data (a byte array), and the presentation timestamp (PTS).
data.samples.forEach(function(sample) {
streamManager.processMetadata('ID3', sample.data, sample.pts);
});
}
});
videoElement.addEventListener('pause', () => {
playButton.style.display = "block";
});
playButton.addEventListener('click', initiatePlayback);
}
function initiatePlayback() {
requestVodVideoStitcherStream();
playButton.style.display = "none";
playButton.removeEventListener('click', initiatePlayback);
playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
streamRequest.vodConfigId = 'VOD_CONFIG_ID';
streamRequest.region = 'LOCATION';
streamRequest.projectNumber = 'PROJECT_NUMBER';
streamRequest.oAuthToken = 'OAUTH_TOKEN';
streamRequest.networkCode = 'NETWORK_CODE';
streamManager.requestStream(streamRequest);
}
重新載入頁面。接著，您就可以要求並播放自訂 VOD 串流。
(選用) 新增串流工作階段選項
使用 VideoStitcherVodStreamRequest.videoStitcherSessionOptions 新增工作階段選項，覆寫預設的 Cloud Video Stitcher API 設定，自訂串流要求。如果您提供無法辨識的選項，Cloud Video Stitcher API 會傳回 HTTP 400 錯誤。如需協助，請參閱疑難排解指南。
舉例來說，您可以使用下列程式碼片段覆寫資訊清單選項，要求兩個串流資訊清單，並依位元率由低到高排序。
...
// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
"manifestOptions": {
"bitrateOrder": "ascending"
}
};
streamManager.requestStream(streamRequest);
清除所用資源
您已成功使用 Google Cloud Video Stitcher API 代管 VOD 串流，並透過 HTML5 適用的 IMA DAI SDK 提出要求，現在請務必清除所有供應資源。
請按照隨選影片清理指南，移除任何不必要的資源和資產。
最後，在啟動 Python 3 網路伺服器的終端機視窗中，使用 ctrl+C 指令結束本機伺服器。