Plyr은 HTML5 비디오 플레이어를 쉽게 사용할 수 있게 해주는 라이브러리입니다. 이 라이브러리를 사용하여 사용자 정의 버튼을 비디오 플레이어에 추가하는 방법에 대해 알아보겠습니다.

Plyr 설치하기

먼저 Plyr을 사용하기 위해 아래와 같이 HTML 문서에 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" />

비디오 플레이어 생성하기

이제 Plyr을 사용하여 비디오 플레이어를 생성합니다. 비디오 요소와 플레이어를 감싸는 컨테이너 요소가 필요합니다.

<div class="wrapper">
  <video controls crossorigin playsinline>
    <source src="video.mp4" type="video/mp4" />
    <!-- 비디오 소스 등록 -->
  </video>
</div>

사용자 정의 버튼 추가하기

비디오 플레이어에 사용자 정의 버튼을 추가하기 위해 Plyr의 controls 옵션을 사용합니다. 이를 사용하여 사용자 정의 버튼을 포함한 컨트롤 바를 생성합니다.

const player = new Plyr('.wrapper video', {
  controls: ['play-large', 'play', 'progress', 'custom-button']
});

여기서 'custom-button'은 Plyr이 기본으로 제공하는 버튼이 아닌, 사용자가 정의한 버튼을 나타냅니다. 이 버튼을 클릭했을 때 원하는 동작을 수행할 수 있습니다.

사용자 정의 버튼 동작 설정하기

사용자 정의 버튼을 클릭했을 때 원하는 동작을 수행하기 위해 Plyr의 on 메소드를 사용합니다.

player.on('custom-button', function(event) {
  // 사용자 정의 버튼 클릭 시 실행할 동작
});

위의 코드에서 custom-button 이벤트가 발생했을 때 동작할 내용을 작성하면 됩니다.

마무리

Plyr을 사용하여 비디오 플레이어에 사용자 정의 버튼을 추가하는 방법에 대해 알아보았습니다. Plyr을 통해 비디오 플레이어를 쉽게 커스터마이징할 수 있으므로, 필요한 경우 사용자 환경에 맞는 기능을 추가할 수 있습니다.

더 자세한 내용은 Plyr 공식 문서를 참고하세요.