スナップバック

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

例として、以下の図をご覧ください。動画の視聴中に 5 分の時点から 15 分の時点までシークすることにしました。ただし、10 分の時点で、視聴者がコンテンツを見る前に視聴するよう広告ブレークを設定できます。

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

  1. ユーザーがシークを再生し、再生されなかった広告ブレークを超えて飛んでいたかどうかを確認し、その場合は、広告ブレークに戻ります。
  2. ミッドロール挿入点が完了したら、元のシークに戻します。

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

高度な例で説明しているように、このワークフローを HTML5 IMA 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;
  }
}