動画パブリッシャーの場合は、視聴者がミッドロール広告をスキップしないようにするため、ユーザーが広告ブレークを過ぎてシークした場合、ユーザーをそのミッドロール挿入点の先頭に戻し、そのミッドロール挿入点の完了後にシーク位置に戻ることができます。この機能は「スナップバック」と呼ばれます。
例として、以下の図をご覧ください。動画の視聴中に 5 分の時点から 15 分の時点までシークすることにしました。ただし、10 分の時点で、視聴者がコンテンツを見る前に視聴するよう広告ブレークを設定できます。
このミッドロール挿入点を表示する方法は次のとおりです。
- ユーザーがシークを再生し、再生されなかった広告ブレークを超えて飛んでいたかどうかを確認し、その場合は、広告ブレークに戻ります。
- ミッドロール挿入点が完了したら、元のシークに戻します。
図で表すと次のようになります。
高度な例で説明しているように、このワークフローを 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;
}
}