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

プラットフォームを選択: HTML5 Android iOS tvOS Roku

このガイドでは、ビデオ オンデマンド（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);
}

サンプルアプリ

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