広告ストリームのブックマークを保存、読み込む

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

ブックマークとは

ブックマークは、コンテンツ ストリームのあるポイントを保存し、後でそこから再生する機能です。たとえば、ユーザーが 5 分間のコンテンツを見ているとします。動画ストリーム中に視聴を中断して、後で中断したところから再生を再開できます。ブックマークはユーザーが見ていた場所を保存するので、中断したところに戻ってスムーズに視聴を続けられます。

DAI ブックマークの仕組み

DAI ストリームをブックマークする場合は、ストリーム ID と、ユーザーが動画を離れた時刻を記録する必要があります。ユーザーが戻ってきたら、ストリーミングを再リクエストし、保存した時間にシークします。リクエストされたストリームの各インスタンスに異なる長さのミッドロール挿入点が存在する可能性があるため、ストリーム時間を保存するだけでは対応できません。同じコンテンツの時間から続行したい場合。

コンバージョン メソッドの活用

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

広告ストリームのブックマークを保存、読み込む

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

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);
}

サンプルアプリ

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