您可以使用 IMA SDK 輕鬆將多媒體廣告整合至網站和應用程式。IMA SDK 可向任何 符合 VAST 規定的廣告伺服器要求廣告，並管理應用程式中的廣告播放作業。透過 IMA DAI SDK，應用程式會針對廣告和內容影片 (隨選影片或直播內容) 提出串流要求。接著，SDK 會傳回合併的影片串流，因此您不必在應用程式中管理廣告和內容影片之間的切換。
選取感興趣的動態廣告解決方案
播放透過 Google Cloud Video Stitcher API 註冊的直播
本指南將說明如何使用 HTML5 適用的 IMA DAI SDK，針對已在 Google Cloud Video Stitcher API 註冊的活動，要求及播放直播，以及如何在播放期間插入廣告插播。
本指南將 IMA DAI 的入門指南中的基本範例做進一步說明。
如要瞭解如何整合其他平台，或如何使用 IMA 用戶端 SDK，請參閱「互動式媒體廣告 SDK」。
如要查看或瞭解完成的整合範例，請下載適用於 HLS 或 DASH 的 Cloud 影片拼接器範例。
設定 Google Cloud 專案
設定 Google Cloud 專案，並設定服務帳戶以存取專案。
為直播活動建立設定，使用您自己的內容直播或測試直播。本指南適用於 HLS 串流。
輸入下列變數，以便在 IMA SDK 中使用：- 位置
- 建立即時設定的 Google Cloud 區域：
LOCATION - 專案編號
- 使用 Video Stitcher API 的 Google Cloud 專案編號：
PROJECT_NUMBER - OAuth 權杖
服務帳戶的短期 OAuth 權杖，具有 Video Stitcher 使用者角色：
OAUTH_TOKEN
進一步瞭解如何為服務帳戶建立短期憑證。只要 OAuth 權杖未過期，就可以在多個要求中重複使用。
- 聯播網代碼
用於要求廣告的 Ad Manager 聯播網代碼：
NETWORK_CODE
- 直播設定 ID
- 建立直播活動時指定的直播設定 ID：
LIVE_CONFIG_ID - 自訂素材資源金鑰
- 使用 Video Stitcher API 建立直播活動設定時，Ad Manager 會產生自訂素材資源鍵：
CUSTOM_ASSET_KEY
設定開發環境
IMA 範例應用程式只會示範 HTTP 即時串流要求。您仍可在建構 VideoStitcherLiveStreamRequest 類別時使用 DASH 串流。設定 DASH 相容的播放器時，您需要為影片播放器的進度事件設定監聽器，以便將影片中繼資料提供給 StreamManager.processMetadata()。這個函式採用三個參數：
type：這個字串必須設為 HLS 串流的'ID3'，或 DASH 串流的'urn:google:dai:2018'。data：對於 DASH 事件訊息，這是訊息資料字串。timestamp：DASH 串流的事件訊息開始時間。
請盡快傳送中繼資料，並盡可能頻繁地傳送玩家事件。如果缺少中繼資料或中繼資料有誤，IMA DAI SDK 可能不會觸發廣告事件，導致報表中的廣告事件不正確。
下載 HTML5 適用的 IMA DAI 範例，並將 HLS.js 簡易範例解壓縮至新資料夾。這個範例是您可在本機代管的網頁應用程式，用於測試。
如要在本機代管範例，請前往新資料夾，然後執行下列 Python 指令以啟動網路伺服器：
python3 -m http.server 8000
http.server 僅適用於 Python 3.x。您可以使用任何其他網路伺服器，例如 Apache HTTP 伺服器或 Node JS。
開啟網路瀏覽器，然後前往 localhost:8000 即可查看影片播放器。你的瀏覽器必須支援 HLS.js 程式庫。
如果一切運作正常，點選影片播放器上的「播放」按鈕後，系統會在短廣告後播放短片「Tears of Steel」。這類內容會透過隨選影片 (VOD) 串流提供。
要求直播
如要將 VOD 串流範例取代為直播，請使用 VideoStitcherLiveStreamRequest 類別，自動透過 Google Ad Manager 建立廣告工作階段。您可以使用 Google Ad Manager UI 找出產生的動態廣告插播廣告工作階段，進行監控和偵錯。
在現有範例中，有用於要求 VOD 串流或直播的函式。如要讓它與 Google Cloud Video Stitcher API 搭配運作，您必須新增函式，以便傳回 VideoStitcherLiveStreamRequest 物件。
範例如下：
// StreamManager which will be used to request ad-enabled 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() {
requestVideoStitcherStream();
playButton.style.display = "none";
playButton.removeEventListener('click', initiatePlayback);
playButton.addEventListener('click', resumePlayback);
}
...
function requestVideoStitcherStream() {
const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
streamRequest.region = 'LOCATION';
streamRequest.projectNumber = 'PROJECT_NUMBER';
streamRequest.oAuthToken = 'OAUTH_TOKEN';
streamRequest.networkCode = 'NETWORK_CODE';
streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';
streamManager.requestStream(streamRequest);
}
如要進行本機測試，如果即時串流檔案位於 Cloud Storage 值區，您需要為來源 http://localhost:8000啟用 CORS。
重新載入頁面。接著，你可以要求並播放自訂直播。
(選用) 新增串流工作階段選項
使用 VideoStitcherLiveStreamRequest.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": {
"includeRenditions": [
{"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
{"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
],
"bitrateOrder": "ascending"
}
};
streamManager.requestStream(streamRequest);
插入廣告插播
Google Cloud Video Stitcher API 會為每個廣告插播插入從廣告代碼擷取的廣告。廣告插播時間點會在資訊清單中以廣告標記表示。廣告標記是由直播編碼器插入。
如果使用的是自有直播，則需要插入廣告標記。如要進一步瞭解支援的 HLS 和 DASH 廣告標記，請參閱廣告標記說明文件。
如果您是使用 Google Cloud Livestream API 建立直播，請插入廣告插播頻道事件。
插入廣告插播後，系統會立即播放廣告。
清除所用資源
您已成功使用 Google Cloud Video Stitcher API 代管直播，並使用 IMA DAI SDK for HTML5 進行要求，因此請務必清除所有放送資源。
請按照直播清理指南移除所有不必要的資源和素材資源。
最後，在啟動 Python 3 網路伺服器的終端機視窗中，使用 ctrl+C 指令結束本機伺服器。