[javascript] Video.js를 사용하여 동영상 재생 중에 플레이어에 스킵 광고 추가하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

Video.js를 다운로드하고 웹 페이지에서 로드합니다.

<link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.10.2/video.js"></script>

동영상 플레이어 요소를 HTML에 추가합니다.

<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
  <source src="path-to-video.mp4" type="video/mp4" />
</video>

스킵 광고에 사용할 버튼을 HTML에 추가합니다.

<button id="skip-ad-button" style="display: none;">스킵 광고</button>

Video.js를 초기화하고 스킵 광고 버튼을 표시하는 JavaScript 코드를 작성합니다.

var player = videojs('my-video');
player.on('timeupdate', function() {
  if(player.currentTime() >= 5) { // 5초 지점에서 스킵 광고 표시
    document.getElementById('skip-ad-button').style.display = 'block';
  }
});

var skipAdButton = document.getElementById('skip-ad-button');
skipAdButton.addEventListener('click', function() {
  player.currentTime(10); // 10초로 이동하여 광고 스킵
});

위 코드에서는 동영상 재생 시간이 5초가 되었을 때 ‘스킵 광고’ 버튼이 표시되고, 버튼을 클릭하면 동영상 재생 시간을 10초로 이동하여 광고를 스킵합니다.

이것은 기본적인 예제일 뿐이며, Video.js를 사용하면 좀 더 복잡한 스킵 광고 로직을 구현할 수도 있습니다. Video.js의 공식 문서와 예제를 확인하면 더 많은 기능을 찾을 수 있습니다.