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

プラットフォームを選択: 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;
  }
}