ブックマーク

このガイドでは、ビデオ オンデマンド（VOD）ストリームにダイナミック広告挿入（DAI）を使用している場合に、IMA DAI SDK を使用してブックマークを実装する方法について説明します。スタートガイドで説明したような IMA DAI 実装が機能していることが前提となります。

ブックマークとは

ブックマークは、コンテンツ ストリーム内の特定の箇所を保存して戻る機能です。ユーザーが 5 分間のコンテンツを視聴した後に動画ストリームを中断し、再び視聴したとします。ブックマーク機能でストリーム内のユーザーの位置が保存されるため、ストリーミングを中断したところから再開でき、視聴者にシームレスなエクスペリエンスを提供できます。

DAI ブックマークの仕組み

DAI ストリームをブックマークする場合は、ユーザーが動画を離れたときのストリーム ID と時間を記録する必要があります。ユーザーが戻ったら、ストリームを再リクエストし、保存された時間までシークします。リクエストされた配信の各インスタンスには、異なる長さの広告ブレークが設定できるため、ストリーミング時間を保存するだけでは機能しません。本当に必要なのは、同じコンテンツ時間から続行することです。

状況を救う変換手法

IMA DAI SDK には、特定のストリーム時間に対するコンテンツ時間と、特定のコンテンツ時間に対するストリーミング時間をリクエストするための 2 つのメソッドが用意されています。これらの変換方法を使用すると、ブックマークしたコンテンツ時間を保存し、ストリームの新しいインスタンスで対応するストリーム時間までシークできます。以下に、ブックマークの実装動作を示すサンプルアプリへのリンクを含むアプローチを示します。

ブックマークを保存しています

コンテンツ プレーヤーが一時停止したときにブックマークを保存する。

onPause() {
   var bookmarkTime = Math.floor(
   streamManager.contentTimeForStreamTime(videoElement.currentTime));
}

ブックマークを読み込んでいます

ストリームを再リクエストするときにブックマークを読み込みます。

function loadUrl(url) {
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    var startTime = 0;
    if (bookmarkTime) {
      var startTime = streamManager.streamTimeForContentTime(bookmarkTime);
      // Seeking on load triggers the onSeekEnd event, so treat this seek as
      // if it's snapback. Without this, resuming at a bookmark kicks you
      // back to the ad before the bookmark.
      isSnapback = true;
    }
    hls.startLoad(startTime);
    videoElement.addEventListener('loadedmetadata', () => { videoElement.play(); });
  });
  hls.loadSource(url);
  hls.attachMedia(videoElement);
}

サンプルアプリ

サンプルアプリをダウンロードして、ブックマークの実装を確認します。