スキップしたミッドロール挿入点に戻る

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

動画パブリッシャーは、視聴者がミッドロール広告をシークしてスキップできないようにしたい場合があります。ユーザーがミッドロール挿入点をシークしてスキップした場合、そのミッドロール挿入点の開始時点に戻し、ミッドロール挿入点の再生が完了したらシーク位置に戻すことができます。この機能は「スナップバック」と呼ばれます。

例として、下の図をご覧ください。視聴者が動画を視聴していて、5 分から 15 分までシークすることにしました。ただし、10 分のところにミッドロール挿入点があり、その後のコンテンツを視聴する前に視聴してもらいたいと考えています。

このミッドロール挿入点を表示する手順は次のとおりです。

  1. ユーザーが未視聴のミッドロール挿入点をスキップするシークを行ったかどうかを確認します。スキップした場合は、ミッドロール挿入点に戻します。
  2. ミッドロール挿入点の再生が完了したら、元のシーク位置に戻します。

図で表すと次のようになります。

高度な例で説明されているように、IMA DAI SDK を使用してスナップバックを実装する方法は次のとおりです。

シークによってミッドロール挿入点が未視聴のままになるのを防ぐ

ユーザーが未視聴のミッドロール挿入点をスキップするシークを行ったかどうかを確認します。スキップした場合は、ミッドロール挿入点に戻します。HTML5 SDK では、コンテンツ プレーヤーの seeked イベントにイベント リスナーを設定して onSeekEnd() をトリガーします。このメソッド（以下に示します）は、ユーザーのシーク時間の前のキューポイントを確認します。再生されていない場合は、最初に希望したシークポイントではなく、そのミッドロール挿入点の開始時点にシークし、その希望するシークポイントを snapForwardTime に保存します。

function onSeekEnd() {
  if (isLiveStream) { return; }
  if (isSnapback) {
    isSnapback = false;
    return;
  }
  var currentTime = videoElement.currentTime;
  var previousCuePoint =
      streamManager.previousCuePointForStreamTime(currentTime);
  if (previousCuePoint && !previousCuePoint.played) {
    isSnapback = true;
    snapForwardTime = currentTime;
    videoElement.currentTime = previousCuePoint.start;
}

ユーザーを元のシーク位置に戻す

AD_BREAK_ENDED イベントを受け取ったら、snapForwardTime が設定されているかどうかを確認します。設定されている場合は、ユーザーをストリームのその位置に移動します。これは、視聴した広告ブレークがスナップバックの結果であるためです。

function onAdBreakEnded(e) {
  videoElement.controls = true;
  clickElement.style.display = 'none';
  adUiDiv.style.display = 'none';
  if (snapForwardTime && snapForwardTime > videoElement.currentTime) {
    videoElement.currentTime = snapForwardTime;
    snapForwardTime = null;
  }
}