[javascript] Video.js를 사용하여 동영상 재생 중에 플레이어에 비디오 퀄리티에 따른 자동 투명 배경 이미지 추가하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

Video.js는 HTML5 비디오 플레이어를 구축하기 위한 오픈 소스 JavaScript 라이브러리입니다. Video.js를 사용하여 동영상 재생 중에 플레이어에 비디오 퀄리티에 따른 자동 투명 배경 이미지를 추가하는 방법을 알아보겠습니다.

첫째로, Video.js 플레이어를 초기화해야 합니다. 아래와 같이 HTML 파일에 스크립트를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <link href="https://vjs.zencdn.net/7.15.0/video-js.min.css" rel="stylesheet">
  <script src="https://vjs.zencdn.net/7.15.0/video.min.js"></script>
</head>
<body>
  <video id="my-video" class="video-js" controls>
    <source src="path/to/video.mp4" type="video/mp4">
    <!-- 다른 비디오 포맷에 대한 소스 추가 -->
  </video>

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

둘째로, 비디오 플레이어에 퀄리티 변경 이벤트 리스너를 추가해야 합니다. player.qualityLevels를 사용하여 이벤트를 처리할 수 있습니다. 아래의 코드를 스크립트에 추가합니다.

player.on('qualitychange', function() {
  var currentQuality = player.qualityLevels().findWhere({selected:true});
  var currentQualityLabel = currentQuality && currentQuality.label;

  if (currentQualityLabel) {
    var backgroundImageUrl = 'path/to/background-image-' + currentQualityLabel + '.jpg';
    player.el().style.backgroundImage = 'url(' + backgroundImageUrl + ')';
  }
});

위의 코드는 퀄리티가 변경될 때마다 선택된 퀄리티의 레이블을 가져와서 해당 레이블에 해당하는 배경 이미지 URL을 생성합니다. 그리고 해당 URL을 비디오 플레이어의 배경 이미지로 설정합니다. 적절한 배경 이미지 경로와 파일 이름으로 수정해야 합니다.

이제 비디오를 재생하고 퀄리티를 변경하면 선택된 퀄리티에 맞는 자동 투명 배경 이미지가 플레이어에 추가됩니다.

더 자세한 정보는 Video.js 공식 문서를 참조하시기 바랍니다.