[javascript] Plyr을 사용하여 비디오 플레이어 만들기

27 Nov 2023

javascript

Plyr은 사용하기 쉬운 오픈 소스 비디오 플레이어 라이브러리입니다. 이 라이브러리를 사용하면 HTML5 비디오 태그와 함께 간단하게 사용자 정의 가능한 플레이어를 만들 수 있습니다.

Plyr 설치하기

Plyr을 사용하기 위해 먼저 해당 라이브러리를 프로젝트에 설치해야 합니다. NPM을 사용하는 경우 다음 명령을 실행하여 Plyr 패키지를 설치할 수 있습니다.

npm install plyr

Plyr 사용하기

다음은 Plyr을 사용하여 비디오 플레이어를 만드는 간단한 예제입니다.

<!DOCTYPE html>
<html>
<head>
  <!-- Plyr CSS 파일 추가 -->
  <link rel="stylesheet" href="https://cdn.plyr.io/3.6.0/plyr.css">
</head>
<body>
  <!-- 비디오 플레이어 컨테이너 -->
  <div id="player">
    <video controls>
      <source src="video.mp4" type="video/mp4">
    </video>
  </div>

  <!-- Plyr JS 파일 추가 -->
  <script src="https://cdn.plyr.io/3.6.0/plyr.js"></script>
  <script>
    // 비디오 플레이어 초기화
    const player = new Plyr('#player');
  </script>
</body>
</html>

위의 예제에서는 Plyr의 CSS 파일과 JS 파일을 HTML 문서에 추가하고, 비디오 플레이어 컨테이너 요소를 생성합니다. 비디오 플레이어 컨테이너의 ID를 사용하여 Plyr을 초기화하면 Plyr에 의해 제공되는 사용자 인터페이스를 가진 비디오 플레이어가 생성됩니다.

Plyr 커스터마이징

Plyr은 다양한 사용자 정의 옵션을 제공하여 비디오 플레이어를 커스터마이징할 수 있습니다. 몇 가지 예시를 살펴보겠습니다.

const player = new Plyr('#player', {
  controls: ['play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'],
  autoplay: true,
  clickToPlay: false,
  keyboard: {
    focused: true,
    global: true
  }
});

위의 예제에서는 Plyr을 초기화할 때 옵션 객체를 전달합니다. controls 옵션은 플레이어에 표시할 컨트롤을 지정하고, autoplay 옵션은 비디오가 자동으로 재생되도록 설정하며, clickToPlay 옵션은 비디오를 클릭하여 재생되는 동작을 비활성화합니다. keyboard 옵션은 키보드 단축키를 활성화하는 옵션입니다.

더 많은 사용자 정의 옵션에 대해서는 Plyr 공식 문서를 참고하시기 바랍니다.

결론

Plyr은 간편한 사용법과 다양한 커스터마이징 옵션을 제공하여 비디오 플레이어를 만들기에 편리한 라이브러리입니다. Plyr을 사용하여 프로젝트에 멋진 비디오 플레이어를 추가해보세요.