동영상 게시자는 미드롤 광고를 지나칠 수 있습니다 사용자가 광고 시점 지나를 검색하면 광고 시간의 시작 부분으로 되돌린 다음 탐색 위치로 이동할 수 있습니다. 이 '스냅백'이라고 부릅니다.
예를 들어 아래 다이어그램을 참조하세요. 시청자가 동영상을 시청하고 있을 때 5분 표시에서 15분 표시까지 탐색하기로 결정합니다. 그러나 원하는 10분 표시 시점에 광고 시점이 다음 콘텐츠를 시청하기 전에 미리 볼 수 있습니다.
이 광고 시점을 표시하려면 다음 단계를 따르세요.
- 사용자가 시청하지 않은 광고 시점을 넘어서 탐색했는지 확인합니다. 그렇다면 광고 시점으로 돌아가세요.
- 광고 시점이 완료되면 원래 탐색으로 되돌립니다.
이를 다이어그램 형식으로 표현하면 다음과 같습니다.
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;
}
}