[javascript] Video.js를 사용하여 동영상 퀄리티를 조절하는 방법은 무엇인가요?

24 Nov 2023

javascript

동영상 퀄리티를 조절하기 위해서는 Video.js의 퀄리티 관련 API를 사용해야 합니다. 아래는 Video.js를 사용하여 동영상 퀄리티를 조절하는 간단한 예제입니다.

먼저, video 엘리먼트에 비디오를 표시하고 Video.js를 초기화합니다.

<!-- HTML -->
<video id="my-video" class="video-js" controls preload="auto">
  <source src="path/to/video.mp4" type="video/mp4">
  <source src="path/to/video.webm" type="video/webm">
</video>

<script src="path/to/video.js"></script>

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

다음으로, 퀄리티 관련 옵션을 설정합니다. Video.js는 자동으로 사용 가능한 퀄리티 옵션을 감지하고 제공합니다.

// JavaScript
player.qualityLevels();

마지막으로, 사용 가능한 퀄리티 옵션을 확인하고, 원하는 퀄리티로 변경합니다.

// JavaScript
player.qualityLevels().on('addqualitylevel', function() {
  var qualities = player.qualityLevels().map(function(quality) {
    return quality.width + 'x' + quality.height;
  });
  console.log('Available qualities: ', qualities.join(', '));
  
  // 원하는 퀄리티로 변경
  player.qualityLevels().selectedIndex = 2; // 예시로 세 번째 퀄리티로 설정
});

위의 예제를 적용하면 Video.js를 사용하여 동영상 퀄리티를 조절할 수 있게 됩니다. Video.js의 다양한 기능과 옵션을 활용하여 동영상 플레이어를 조작할 수 있습니다.

여기서는 몇 가지 기본적인 내용을 소개했지만, Video.js의 공식 문서를 참고하면 더 많은 기능을 알아볼 수 있습니다.