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

24 Nov 2023

javascript

Video.js 라이브러리를 다운로드하고 웹 페이지에 추가합니다. 다음은 HTML에서 Video.js 스크립트를 추가하는 예입니다.

<!DOCTYPE html>
<html>
<head>
  <link href="path/to/video-js.css" rel="stylesheet">
  <script src="path/to/video.js"></script>
</head>
<body>
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264">
    <source src="path/to/video.mp4" type="video/mp4">
  </video>

  <!-- 광고 배너를 추가할 요소 -->
  <div id="ad-banner">
    <!-- 광고 내용 추가 -->
  </div>

  <script>
    var player = videojs('my-video');
  </script>
</body>
</html>

Video.js의 timeupdate 이벤트를 사용하여 플레이어의 시간이 변경될 때마다 광고 배너를 업데이트합니다. 다음은 JavaScript에서 광고 배너를 처리하는 예입니다.

var player = videojs('my-video');

player.on('timeupdate', function() {
  var currentTime = player.currentTime();

  // 예를 들어, 10초에서 20초 사이에 광고를 보여준다고 가정
  if (currentTime >= 10 && currentTime <= 20) {
    showAdBanner();
  } else {
    hideAdBanner();
  }
});

function showAdBanner() {
  var adBanner = document.getElementById('ad-banner');
  adBanner.style.display = 'block';
}

function hideAdBanner() {
  var adBanner = document.getElementById('ad-banner');
  adBanner.style.display = 'none';
}

showAdBanner 및 hideAdBanner 함수를 사용하여 광고 배너를 표시하거나 숨깁니다. CSS를 사용하여 원하는 스타일을 적용할 수 있습니다.

이제 Video.js를 사용하여 동영상 재생 중에 반응형 광고 배너를 추가하는 방법을 알게 되었습니다. timeupdate 이벤트를 사용하여 플레이어의 시간을 감지하고, 해당하는 시간대에 광고를 표시하도록 JavaScript 코드를 작성했습니다. 이를 이용하여 웹 사이트에서 동영상과 광고를 함께 재생할 수 있습니다.