[javascript] Video.js를 사용하여 동영상 재생 중에 화면에 텍스트 표시하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

아래는 Video.js 플러그인을 사용하여 동영상 재생 중에 텍스트를 표시하는 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet">
  <script src="https://vjs.zencdn.net/7.11.4/video.js"></script>
  <style>
    #text-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 24px;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
    <source src="video.mp4" type="video/mp4">
  </video>
  <div id="text-overlay"></div>

  <script>
    var overlayDiv = document.getElementById('text-overlay');
    var video = videojs('my-video');

    video.on('timeupdate', function() {
      if (video.currentTime() >= 10 && video.currentTime() <= 15) { // 텍스트를 표시할 시간 범위 설정
        overlayDiv.innerText = "화면에 표시할 텍스트"; // 화면에 표시할 텍스트 지정
        overlayDiv.style.display = 'block';
      } else {
        overlayDiv.style.display = 'none';
      }
    });
  </script>
</body>
</html>

위 코드에서는 Video.js 라이브러리와 해당 버전의 리소스를 가져오고, 동영상을 비디오 태그로 로드합니다. 텍스트를 표시하기 위해 <div> 요소를 생성하고, 플러그인을 사용하여 특정 시간 범위에 따라 텍스트를 화면에 표시하고 숨깁니다.

timeupdate 이벤트는 비디오의 재생 시간이 변경될 때마다 실행되므로, currentTime() 메소드를 사용하여 현재 재생 시간을 확인한 후에 텍스트를 표시할지 숨길지 결정합니다. 위 예제에서는 10초부터 15초까지의 시간 범위로 설정하였습니다.

텍스트를 표시하기 위해 innerText 속성을 사용하고, display 속성을 변경하여 텍스트를 숨기거나 표시합니다.

적용하려는 동영상의 시간 범위와 텍스트는 코드에서 수정할 수 있습니다. 이러한 방식으로 Video.js를 활용하여 동영상 재생 중에 원하는 텍스트를 화면에 표시할 수 있습니다.