Plyr은 자바스크립트 기반의 영상 플레이어 라이브러리입니다. 이 라이브러리를 사용하면 HTML5 영상 요소를 간편하게 커스터마이징하고 제어할 수 있습니다. 이번 글에서는 Plyr을 사용하여 영상 품질을 변경하는 방법에 대해 알아보겠습니다.

1. Plyr 설치하기

먼저 Plyr을 설치해야 합니다. npm을 사용하려면 다음 명령을 실행하세요.

npm install plyr

또는 직접 <script> 태그를 사용하여 Plyr 라이브러리를 가져올 수도 있습니다.

<script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />

2. Plyr 영상 요소 생성하기

다음으로 Plyr 영상 요소를 생성해야 합니다. 영상 요소에는 영상 URL이나 로컬 파일 경로를 지정해야 합니다.

<video id="player" controls>
  <source src="영상URL" />
</video>

3. Plyr 설정하기

Plyr을 초기화하고 설정하기 위해 자바스크립트 코드를 추가합니다. 영상 플레이어 인스턴스를 생성하고 옵션을 설정할 수 있습니다. 여기서는 quality 옵션을 추가하여 다양한 품질을 지원하도록 설정해보겠습니다.

const player = new Plyr("#player", {
  controls: ['play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'fullscreen'],
  quality: {
    default: 720,
    options: [720, 480, 360]
  }
});

위 코드에서 quality 옵션은 기본 품질을 720으로 설정하고, 720, 480, 360의 품질 옵션을 제공합니다.

4. 영상 품질 변경하기

이제 Plyr을 사용하여 영상 품질을 변경할 수 있습니다. Plyr은 자동으로 영상 품질 선택 메뉴를 생성하므로, 사용자는 영상 플레이어 상단의 설정 아이콘을 클릭하여 원하는 품질로 변경할 수 있습니다.

또는 자바스크립트 코드를 사용하여 영상 품질을 변경할 수도 있습니다. 아래 코드는 예시입니다.

player.source = {
  type: 'video',
  sources: [{
    src: '영상URL',
    type: 'video/mp4',
    size: 720
  }]
};

위 코드에서 player.source를 사용하여 영상 URL과 품질을 지정합니다.

이렇게 Plyr을 사용하여 영상 품질을 변경할 수 있습니다. Plyr은 사용자 친화적인 인터페이스와 다양한 커스터마이징 옵션을 제공하여 영상 플레이어를 간단하게 구현할 수 있습니다.

더 많은 자세한 정보는 Plyr 공식 문서를 참고하세요.

참고: 이 글은 Plyr 3.6.2 버전을 기준으로 작성되었습니다. 다른 버전에서는 일부 내용이 변경될 수 있습니다.