광고 스트림 북마크 저장 및 로드

이 가이드에서는 VOD 스트림에 동적 광고 삽입(DAI)을 사용할 때 IMA DAI SDK를 사용하여 북마크를 구현하는 방법을 보여줍니다. 여기서는 시작하기에 설명된 것과 같이 작동하는 IMA DAI 구현이 있다고 가정합니다.

북마크란 무엇인가요?

북마크는 콘텐츠 스트림의 특정 포인트를 저장한 다음 돌아가는 기능입니다. 사용자가 콘텐츠를 5분간 시청하고 동영상 스트림에서 나간 후 돌아온다고 가정하겠습니다. 북마크가 스트림 내 사용자의 위치를 저장하므로 스트림이 중단된 위치를 찾아내어 뷰어에 원활한 환경을 제공합니다.

DAI 북마크의 내부 작동 방식

DAI 스트림을 북마크할 때는 사용자가 동영상을 나가는 시점의 스트림 ID와 시간을 기록해야 합니다. 사용자가 돌아오면 스트림을 다시 요청하고 저장된 시간으로 탐색합니다. 요청된 스트림의 각 인스턴스에는 길이가 다른 광고 시점이 있을 수 있으므로 스트림 시간을 저장하는 것만으로는 작동하지 않습니다. 실제로는 동일한 콘텐츠 시간부터 계속 진행하는 것이 좋습니다.

전환 방법으로 해결하기

IMA DAI SDK는 지정된 스트림 시간의 콘텐츠 시간과 지정된 콘텐츠 시간의 스트림 시간을 요청하는 메서드 쌍을 제공합니다. 이러한 변환 메서드를 사용하면 북마크된 콘텐츠 시간을 저장한 다음 스트림의 새 인스턴스에서 해당하는 스트림 시간으로 탐색할 수 있습니다. 다음은 작동하는 북마크 구현을 보여주는 샘플 앱 링크를 포함한 접근 방식입니다.

광고 스트림 북마크 저장 및 로드

콘텐츠 플레이어가 일시중지되면 북마크를 저장합니다.

onPause() {
   var bookmarkTime = Math.floor(
   streamManager.contentTimeForStreamTime(videoElement.currentTime));
}

북마크 로드 중

스트림을 다시 요청할 때 북마크를 로드합니다.

function loadUrl(url) {
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    var startTime = 0;
    if (bookmarkTime) {
      var startTime = streamManager.streamTimeForContentTime(bookmarkTime);
      // Seeking on load triggers the onSeekEnd event, so treat this seek as
      // if it's snapback. Without this, resuming at a bookmark kicks you
      // back to the ad before the bookmark.
      isSnapback = true;
    }
    hls.startLoad(startTime);
    videoElement.addEventListener('loadedmetadata', () => { videoElement.play(); });
  });
  hls.loadSource(url);
  hls.attachMedia(videoElement);
}

샘플 앱

북마크 구현을 보려면 샘플 앱을 다운로드하세요.