Plyr은 웹에서 동영상을 플레이할 수 있는 자바스크립트 라이브러리입니다. Plyr을 사용하면 사용자에게 플레이어 컨트롤을 제공하고 다양한 옵션을 추가할 수 있습니다. 이번 포스트에서는 Plyr을 사용하여 동영상 플레이어에 스케일링 옵션을 추가하는 방법을 알아보겠습니다.

Plyr 설치하기

먼저 Plyr을 사용하기 위해 다음과 같이 필요한 파일들을 다운로드 받아 웹페이지에 추가해야 합니다.

<!-- Plyr CSS -->
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />

<!-- Plyr JS -->
<script src="https://cdn.plyr.io/3.6.8/plyr.js"></script>

동영상 플레이어 생성하기

다음으로 Plyr을 사용하여 동영상 플레이어를 생성해보겠습니다. 플레이어를 생성하기 위해 <video> 요소를 추가하고 plyr 클래스를 적용해야 합니다.

<video class="plyr" controls>
  <source src="video.mp4" type="video/mp4" />
  <!-- 기타 source 태그들 -->
</video>

스케일링 옵션 추가하기

Plyr은 다양한 컨트롤 버튼을 제공하는데, 스케일링 옵션을 추가하기 위해서는 plyr--zoomable 클래스를 <video> 요소에 추가해야 합니다.

<video class="plyr plyr--zoomable" controls>
  <source src="video.mp4" type="video/mp4" />
  <!-- 기타 source 태그들 -->
</video>

Plyr 초기화하기

Plyr을 사용하기 위해 페이지가 로드될 때 Plyr을 초기화해야 합니다. 다음과 같이 스크립트를 작성하여 Plyr을 초기화할 수 있습니다.

document.addEventListener("DOMContentLoaded", function() {
  const player = new Plyr('.plyr', {
    // 추가적인 옵션들 설정 가능
  });
});

결과 확인하기

위와 같이 작성하여 Plyr을 초기화한 후 웹페이지를 열어 동영상 플레이어를 확인해보세요. 플레이어에는 스케일링 옵션 버튼이 추가되어야 합니다. 버튼을 클릭하면 동영상이 스케일링되는 것을 확인할 수 있습니다.

참고 자료

• Plyr 공식 사이트