[javascript] Video.js를 사용하여 동영상 재생 중에 플레이어 바로 위에 자동으로 텍스트 배너 출력하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

Video.js 라이브러리를 다운로드하고 HTML 파일에 포함시킵니다.
<video> 요소를 생성하고, Video.js를 초기화합니다.
재생 중에 텍스트 배너를 출력할 영역을 <div>로 생성합니다. 이 <div>는 플레이어의 위치 위에 배치되어야 합니다.
Video.js의 "timeupdate" 이벤트를 사용하여 현재 동영상 재생 시간을 계속해서 모니터링합니다.
재생 시간에 따라 텍스트 배너를 업데이트합니다. 예를 들어, 10초에는 “광고입니다”라는 텍스트가 나타날 수 있습니다.
텍스트 배너를 업데이트할 때는, <div>의 innerHTML 속성을 사용하여 텍스트를 변경합니다.

아래는 이 방법을 구현한 JavaScript 코드의 예시입니다.

// Video.js 초기화
var player = videojs('my-video');

// 텍스트 배너를 출력할 영역 생성
var banner = document.createElement('div');
banner.style.position = 'absolute';
banner.style.top = '15px';
banner.style.left = '0';
banner.style.width = '100%';
banner.style.textAlign = 'center';
banner.style.fontSize = '18px';
banner.style.backgroundColor = 'black';
banner.style.color = 'white';
banner.style.padding = '10px';

// Video.js의 "timeupdate" 이벤트 리스너 등록
player.on('timeupdate', function() {
  // 텍스트 배너 업데이트
  if (player.currentTime() >= 10 && player.currentTime() < 20) {
    banner.innerHTML = '광고입니다';
  } else {
    banner.innerHTML = '';
  }
});

// 텍스트 배너를 플레이어 바로 위에 추가
var videoContainer = document.getElementById('my-video');
videoContainer.parentNode.insertBefore(banner, videoContainer);

위의 코드는 10초에서 20초 사이에 “광고입니다”라는 텍스트 배너를 출력합니다. 시간 범위와 텍스트 내용을 필요에 따라 수정하여 사용하시면 됩니다.

주의할 점은 텍스트 배너가 플레이어 위에 정확히 배치되도록 CSS 속성을 조정해야 합니다.