IMA SDK を使用すると、ウェブサイトやアプリにマルチメディア広告を簡単に統合できます。IMA SDK は 任意のネットワークから広告をリクエストし、 <ph type="x-smartling-placeholder"></ph> VAST 準拠の広告サーバーを実装し、アプリでの広告再生を管理できます。IMA DAI SDK を使用すると、 広告およびコンテンツ動画(VOD またはライブ コンテンツ)のストリーム リクエスト。すると、SDK は 統合動画ストリームであるため、広告とコンテンツ動画の切り替えを管理する手間が省けます。 確認できます。
ご希望の DAI ソリューションを選択する
フルサービス DAI
このガイドでは、IMA DAI SDK をシンプルな動画に統合する方法を説明します。 プレーヤー アプリ。完成したサンプルを表示または ダウンロードしてください。 簡単な例をご覧ください。
IMA DAI の概要
IMA DAI SDK の実装には、2 つの主要コンポーネントが含まれます( 本書:
StreamRequest
-VODStreamRequest
またはLiveStreamRequest
: ストリーム リクエストを定義するオブジェクト。ストリーミング リクエストはビデオ オンデマンドまたはライブ 使用できます。リクエストでは、Content ID、API キーまたは認証トークン、 あります。StreamManager
: ダイナミック広告挿入のストリームと DAI バックエンドとのインタラクションを処理するオブジェクト。「 ストリーム マネージャーはトラッキング ping も処理し、 あります。
前提条件
- 空のファイルが 3 つある
<ph type="x-smartling-placeholder">
- </ph>
- dai.html
- dai.css
- dai.js
- パソコンまたはテストに使用するウェブサーバーに Python がインストールされていること
開発用サーバーを起動する
IMA DAI SDK はページと同じプロトコルを使用して依存関係を読み込むため、 ウェブサーバーを使用してアプリをテストする必要があります。 ローカル開発用サーバーをすぐに起動するには、Python の組み込み あります。
index.html
ファイルを含むディレクトリからのコマンドラインの使用 次のコマンドを実行します。python -m http.server 8000
ウェブブラウザで
http://localhost:8000/
にアクセスします。
シンプルな動画プレーヤーを作成する
まず、dai.html を変更してシンプルな HTML5 動画要素と div 要素を作成します。
使用されますまた、dai.css を読み込むために必要なタグを追加します。
と dai.js ファイルを設定し、hls.js
動画プレーヤーをインポートしてください。次に、
dai.css を変更して、ページ要素のサイズと位置を指定します。
最後に、dai.js で、ストリーム リクエストを保持するための変数を定義します。
ページの読み込み時に実行する initPlayer()
関数を定義します。
dai.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="dai.js"></script>
<link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
<h2>IMA DAI SDK DAI Demo (HLS.JS)</h2>
<video id="video"></video>
<div id="ad-ui"></div>
</body>
</html>
dai.css
#video,
#ad-ui {
width: 640px;
height: 360px;
position: absolute;
top: 35px;
left: 0;
}
#ad-ui {
cursor: pointer;
}
dai.js
var BACKUP_STREAM =
'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'
// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";
// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";
var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;
var isAdBreak;
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
}
IMA DAI SDK を読み込む
次に、dai.html のスクリプトタグを使用して IMA フレームワークを追加します。 dai.js の場合。
dai.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
<script src="dai.js"></script>
<link rel="stylesheet" href="dai.css" type="text/css">
</head>
StreamManager を初期化してストリーム リクエストを行う
広告のセットをリクエストするには、ima.dai.api.StreamManager
を作成します。
DAI ストリームのリクエストと管理を担当します。コンストラクタは
生成されたインスタンスは、広告を処理する広告 UI 要素を受け取ります。
できます。
次に、ストリームをリクエストする関数を定義します。この例には、次の関数が含まれています。
VOD とライブ配信の両方(VODStreamRequest
と
LiveStreamRequest
を呼び出してから、streamManager.requestStream()
を呼び出します。
streamRequest
パラメータに置き換えます。ライブ配信の場合は、動画の
時間指定されたメタデータ イベントをリッスンし、イベントを
StreamManager
。ユースケースに合わせて、コードをコメント化またはコメント化解除できます。
どちらのメソッドもオプションの API キーを受け取ります。保護されたストリームを使用している場合、
必要
DAI 認証キーを作成します。
この例のストリームは保護されていないため、apiKey
は使用されません。
dai.js
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)
// Timed metadata is only used for LIVE streams.
hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
if (streamManager && data) {
// For each ID3 tag in the metadata, 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);
});
}
});
requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
// Uncomment the line below and comment out the one above to request a
// LIVE stream instead of a VOD stream.
//requestLiveStream(TEST_ASSET_KEY, null);
}
function requestVODStream(cmsId, videoId, apiKey) {
var streamRequest = new google.ima.dai.api.VODStreamRequest();
streamRequest.contentSourceId = cmsId;
streamRequest.videoId = videoId;
streamRequest.apiKey = apiKey;
streamManager.requestStream(streamRequest);
}
function requestLiveStream(assetKey, apiKey) {
var streamRequest = new google.ima.dai.api.LiveStreamRequest();
streamRequest.assetKey = assetKey;
streamRequest.apiKey = apiKey;
streamManager.requestStream(streamRequest);
}
ストリーム イベントを処理する
最後に、主要な動画イベントのイベント リスナーを実装します。この
シンプルな例では、LOADED
、ERROR
、AD_BREAK_STARTED
、
onStreamEvent()
関数を呼び出して AD_BREAK_ENDED
イベントを作成します。この関数
ストリームの読み込みとエラーを処理し、プレーヤー コントロールを無効にする
(SDK で要求されます)ストリームの状態は
読み込まれると、動画プレーヤーは loadUrl()
を使用して、指定された URL を読み込んで再生します。
使用します。
また、動画要素の pause
に対してイベント リスナーをセットアップすることもできます。
および start
イベント: IMA が一時停止したときにユーザーが再生を再開できるようにする
挿入できます。
DAI を使用するには、カスタム プレーヤーがライブ配信の ID3 イベントを渡す必要があります IMA DAI SDK に追加します。
dai.js
var isAdBreak;
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
videoElement.addEventListener('pause', onStreamPause);
videoElement.addEventListener('play', onStreamPlay);
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);
...
function onStreamEvent(e) {
switch (e.type) {
case google.ima.dai.api.StreamEvent.Type.LOADED:
console.log('Stream loaded');
loadUrl(e.getStreamData().url);
break;
case google.ima.dai.api.StreamEvent.Type.ERROR:
console.log('Error loading stream, playing backup stream.' + e);
loadUrl(BACKUP_STREAM);
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
console.log('Ad Break Started');
isAdBreak = true;
videoElement.controls = false;
adUiElement.style.display = 'block';
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
console.log('Ad Break Ended');
isAdBreak = false;
videoElement.controls = true;
adUiElement.style.display = 'none';
break;
default:
break;
}
}
function loadUrl(url) {
console.log('Loading:' + url);
hls.loadSource(url);
hls.attachMedia(videoElement);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
console.log('Video Play');
videoElement.play();
});
}
function onStreamPause() {
console.log('paused');
if (isAdBreak) {
videoElement.controls = true;
adUiElement.style.display = 'none';
}
}
function onStreamPlay() {
console.log('played');
if (isAdBreak) {
videoElement.controls = false;
adUiElement.style.display = 'block';
}
}
これで、これで、IMA DAI SDK を使用して広告をリクエストし、表示できるようになりました。宛先 高度な SDK 機能について詳しくは、他のガイドや GitHub のサンプルをご覧ください。