[javascript] Plyr을 사용하여 동영상 플레이어의 액션 버튼 추가하기

27 Nov 2023

javascript

Plyr은 HTML5 동영상 플레이어의 사용성을 향상시키는 강력한 도구입니다. 이 플레이어를 사용하면 동영상 재생, 일시 정지, 반복 재생 등과 같은 여러 가지 액션을 간편하게 추가할 수 있습니다. 이번 튜토리얼에서는 Plyr을 사용하여 동영상 플레이어에 액션 버튼을 추가하는 방법을 알아보겠습니다.

Plyr 설치하기

먼저, Plyr을 설치하기 위해 다음의 npm 명령어를 사용합니다:

npm install plyr

HTML 구조 설정하기

다음으로, Plyr을 사용하여 동영상 플레이어를 생성하기 위해 HTML 구조를 설정해야 합니다. 다음은 기본적인 HTML 구조입니다:

<div class="plyr__video-embed">
  <iframe src="https://player.vimeo.com/video/123456789" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>

<div class="plyr__controls">
  <button class="plyr__control" data-plyr="play">
    <svg class="plyr__icon plyr__icon--pressed" viewBox="0 0 18 18" width="18" height="18">
      <path d="M6 4l8 4-8 4z"></path>
    </svg>
    <span class="plyr__sr-only">재생</span>
  </button>
  
  <button class="plyr__control" data-plyr="pause">
    <svg class="plyr__icon plyr__icon--pressed" viewBox="0 0 18 18" width="18" height="18">
      <path d="M4 4h3v10H4zm7 0h3v10h-3z"></path>
    </svg>
    <span class="plyr__sr-only">일시 정지</span>
  </button>
  
  <!-- 추가할 액션 버튼들 -->
</div>

위의 코드에서 plyr__video-embed 클래스를 가진 <div> 요소는 동영상을 재생하기 위한 iframe을 포함하고 있습니다. plyr__controls 클래스를 가진 <div> 요소는 플레이어의 컨트롤 버튼들을 포함하고 있으며, data-plyr 속성을 사용하여 각 버튼에 해당하는 Plyr 액션을 지정하고 있습니다.

Plyr 초기화하기

다음으로, Plyr을 초기화하여 동영상 플레이어를 생성합니다. JavaScript 코드에서 다음과 같이 Plyr을 초기화할 수 있습니다:

import Plyr from 'plyr';

const player = new Plyr('.plyr__video-embed');

위의 코드에서 plyr__video-embed 클래스를 가지는 동영상 플레이어를 Plyr 객체로 초기화하고, player 변수에 저장합니다.

액션 버튼 추가하기

이제 액션 버튼을 추가하기 위해 Plyr API를 사용할 수 있습니다. 예를 들어, 다음과 같이 JavaScript 코드에서 controls 메서드를 사용하여 액션 버튼을 추가할 수 있습니다:

player.controls([
  'play', // 플레이 버튼 추가
  'pause', // 일시 정지 버튼 추가
  // 추가할 액션 버튼들
]);

위의 코드에서는 play와 pause 버튼을 추가하고 있으며, 필요에 따라 추가할 액션 버튼의 이름을 배열에 추가할 수 있습니다.

결론

Plyr을 사용하여 동영상 플레이어에 액션 버튼을 추가하는 방법을 알아보았습니다. Plyr은 사용하기 쉽고 강력한 동영상 플레이어 라이브러리로, 다양한 기능을 손쉽게 추가할 수 있습니다. 추가적인 정보는 Plyr의 공식 문서를 참고하시기 바랍니다.

Plyr 공식 문서: https://plyr.io/