プロジェクトで Video Stitcher API を有効にするには、アカウント担当者または営業担当者に詳細をお問い合わせください。

HTML5 クライアントで IMA DAI SDK を使用する

Google Cloud Video Stitcher API で登録された VOD ストリームの再生

このガイドでは、HTML5 向け IMA DAI SDK を使用して Google Cloud VOD ストリームセッションをリクエストして再生する方法について説明します。

このガイドでは、IMA DAI のスタートガイドに記載されている基本的な例について詳しく説明します。

他のプラットフォームとの統合や IMA クライアントサイド SDK の使用方法については、Interactive Media Ads SDK をご覧ください。

Google Cloud プロジェクトの設定

IMA SDK で使用する次の変数を入力します。

ロケーション

VOD 構成が作成された Google Cloud リージョン: LOCATION

プロジェクト番号

Video Stitcher API を使用する Google Cloud プロジェクト番号: PROJECT_NUMBER

OAuth トークン

Video Stitcher ユーザーロールを持つサービスアカウントの有効期間が短い OAuth トークン:

OAUTH_TOKEN

有効期間が短い OAuth トークンの作成の詳細を確認します。OAuth トークンは、有効期限が切れていない限り、複数のリクエストで再利用できます。

ネットワークコード

広告をリクエストするためのアドマネージャーネットワークコード: NETWORK_CODE

VOD 構成 ID

VOD ストリームの VOD 構成 ID: VOD_CONFIG_ID

VOD 構成 ID の作成方法については、クラウドスティッチング作成の VOD 構成ガイドをご覧ください。

開発環境を構成する

IMA サンプルアプリでは、HLS ストリームリクエストのみが示されています。VideoStitcherVodStreamRequest クラスを作成するときには、引き続き DASH ストリームを使用できます。DASH 対応プレーヤーを設定するときに、動画プレーヤーの進行状況イベントのリスナーを設定し、動画のメタデータを StreamManager.processMetadata() に提供できるようにする必要があります。この関数は次の 3 つのパラメータを取ります。

type: HLS ストリームの場合は 'ID3'、DASH ストリームの場合は 'urn:google:dai:2018' に設定する必要があります。
data: DASH イベントメッセージの場合、これはメッセージデータ文字列です。
timestamp: DASH ストリームのイベントメッセージの開始時刻を示す数値。

プレーヤーイベントで提供できる限り、メタデータをできるだけ早く、頻繁に送信してください。メタデータがない場合やメタデータが正しくない場合、IMA DAI SDK が広告イベントをトリガーしないため、広告イベントが正しく報告されません。

HTML5 向け IMA DAI サンプルをダウンロードし、hls_js/simple サンプル zip ファイルを新しいフォルダに抽出します。この例は、テスト用にローカルでホストできるウェブアプリです。

サンプルをローカルでホストするには、新しいフォルダに移動し、次の Python コマンドを実行してウェブサーバーを起動します。

python3 -m http.server 8000

http.server は Python 3.x でのみ使用できます。Apache HTTP Server や Node JS などの他のウェブサーバーも使用できます。

ウェブブラウザを開いて localhost:8000 に移動し、動画プレーヤーを表示します。お使いのブラウザが HLS.js ライブラリをサポートしている必要があります。

すべてが正常に機能している場合、動画プレーヤーの [再生] ボタンをクリックすると、30 秒ごとにミッドロール挿入点がある短編映画「Tears of Steel」が開始されます。

VOD ストリームをリクエストする

サンプルストリームを広告合成された VOD ストリームに置き換えるには、VideoStitcherVodStreamRequest クラスを使用して、Google アドマネージャーで広告セッションを自動的に作成します。Google アドマネージャーの UI を使用して、モニタリングとデバッグのために、生成された 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 エラーの応答が返されます。詳しくは、トラブルシューティングガイドをご覧ください。

たとえば、次のコードスニペットでマニフェストオプションをオーバーライドできます。このコードは、ビットレートを最小に並べたレンディションをもつ 2 つのストリームマニフェストをリクエストします。

...

// 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 を使用して VOD ストリームを正常にホストし、HTML5 用の IMA DAI SDK を使用してリクエストできたので、サービングリソースをクリーンアップすることが重要です。

VOD のクリーンアップガイドに沿って、不要なリソースとアセットを削除します。

最後に、Python 3 ウェブサーバーを起動したターミナルウィンドウで、ctrl+C コマンドを使用してローカルサーバーを終了します。

Chromecast

iOS