[javascript] Video.js를 사용하여 동영상 재생 중에 플레이어에 비디오 퀄리티 변경 메뉴 추가하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

Video.js를 사용하여 동영상 재생 중에 플레이어에 비디오 퀄리티 변경 메뉴를 추가하는 방법을 알려드리겠습니다.

첫째로, Video.js 라이브러리를 다운로드하고 HTML 문서에 추가합니다. 다음은 예시 코드입니다:

<!DOCTYPE html>
<html>
<head>
  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
  <script src="https://unpkg.com/video.js/dist/video.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>

둘째로, Video.js 퀄리티 메뉴 플러그인을 다운로드하고 추가합니다. 플러그인으로는 videojs-hls-quality-selector 플러그인을 사용하겠습니다. 다음은 예시 코드입니다:

<!DOCTYPE html>
<html>
<head>
  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
  <script src="https://unpkg.com/video.js/dist/video.js"></script>
  <script src="https://unpkg.com/videojs-hls-quality-selector/dist/videojs-hls-quality-selector.js"></script>
</head>
<body>
  <video id="my-video" class="video-js" controls>
    <source src="path/to/video.m3u8" type="application/x-mpegURL">
  </video>

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

위의 코드에서 src 속성에는 사용자가 재생할 동영상 파일의 경로를 입력해주면 됩니다. 또한, 플레이어의 id도 원하는대로 변경해주셔도 됩니다.

이제 동영상을 재생할 때 퀄리티 변경 메뉴가 플레이어 하단에 표시될 것입니다. 사용자는 이 메뉴를 통해 동영상의 퀄리티를 선택할 수 있게 됩니다.

더 자세한 내용은 Video.js 공식 문서를 참조하시기 바랍니다. Video.js 공식 문서

이제 Video.js를 사용하여 동영상 플레이어에 퀄리티 변경 메뉴를 추가하는 방법을 알게 되었습니다. 재생 중에 사용자가 편리하게 퀄리티를 변경할 수 있도록 이 기능을 추가해보세요!