[javascript] Video.js를 사용하여 동영상 재생 중에 플레이어에 워터마크 이미지 추가하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

Video.js는 HTML5 비디오 플레이어를 만들기 위한 오픈소스 JavaScript 라이브러리입니다. Video.js를 사용하여 동영상 재생 중에 플레이어에 워터마크 이미지를 추가하는 방법은 간단합니다.

먼저, Video.js 라이브러리를 HTML 문서에 추가합니다. 다음으로, <video> 요소를 만들고 id를 할당하여 동영상을 재생할 곳을 지정합니다. 그리고 아래의 예제 코드를 참고하여 워터마크 이미지를 추가하는 방법을 살펴보세요.

<!DOCTYPE html>
<html>
<head>
  <link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet">
  <script src="https://vjs.zencdn.net/7.14.3/video.js"></script>
</head>
<body>
  <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
    <source src="path/to/your/video.mp4" type="video/mp4">
  </video>
  
  <script>
    var player = videojs('my-video');
    
    player.on('loadedmetadata', function() {
      var watermarkImage = document.createElement('img');
      watermarkImage.src = 'path/to/your/watermark.png';
      watermarkImage.style.position = 'absolute';
      watermarkImage.style.bottom = '10px';
      watermarkImage.style.right = '10px';
      
      var playerWrapper = document.querySelector('.vjs-tech');
      playerWrapper.appendChild(watermarkImage);
    });
  </script>
</body>
</html>

위의 예제 코드에서 my-video라는 id로 지정된 <video> 요소에 동영상이 로드되면 loadedmetadata 이벤트가 발생합니다. 이때, 워터마크 이미지를 생성하고 위치를 조정하여 <video> 요소의 .vjs-tech 클래스를 가진 요소에 추가합니다. 워터마크 이미지를 조정하는 부분은 원하는 위치에 따라 수정할 수 있습니다.

위의 예제 코드를 사용하면 Video.js를 이용하여 플레이어에 워터마크 이미지를 추가할 수 있습니다.