Colin's Blog
[javascript] Plyr을 사용하여 음량 조절 기능 추가하기

웹 페이지에 동영상을 재생할 때 사용하는 플레이어는 다양한 기능을 제공해야 합니다. 그 중 하나는 음량을 조절하는 기능입니다. 이번 포스트에서는 Plyr이라는 JavaScript 라이브러리를 사용하여 웹 페이지에 음량 조절 기능을 추가하는 방법을 알아보겠습니다.

Plyr이란?

Plyr은 사용하기 쉬운 HTML5 동영상 플레이어 라이브러리로, 모바일 및 데스크탑에서 최상의 사용자 경험을 제공합니다. Plyr은 다양한 기능을 제공하며, 사용자 지정과 테마화가 가능합니다.

Plyr 설치하기

먼저, Plyr을 설치해야 합니다. Plyr은 CDN을 통해 라이브러리를 제공하므로, 다음과 같이 <head> 태그 안에 스크립트를 추가합니다.

<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을 사용하여 음량 조절 기능을 추가하기 전에, 먼저 동영상을 웹 페이지에 추가해야 합니다. Plyr은 HTML5 <video> 태그를 사용하여 동영상을 재생합니다. 다음은 Plyr로 동영상을 추가하는 예시입니다.

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

위의 예시에서는 video.mp4와 video.webm 두 가지 형식의 동영상 파일을 지원하는 <source> 태그를 사용하고 있습니다. 브라우저가 지원하지 않을 경우 “Your browser does not support the video tag.” 메시지가 표시됩니다.

Plyr 초기화하기

Plyr을 사용하기 위해 동영상에 대한 플레이어를 초기화해야 합니다. JavaScript 코드에서 다음과 같이 Plyr을 초기화할 수 있습니다.

const player = new Plyr('#your-video-id');

위의 예시에서는 ‘#your-video-id’ 부분을 실제 동영상 태그의 id로 변경해야 합니다.

음량 조절 기능 추가하기

이제 Plyr을 사용하여 음량 조절 기능을 추가할 수 있습니다. Plyr은 볼륨 슬라이더를 표시하고, 사용자가 슬라이더를 조작하여 음량을 조절할 수 있게 합니다. 다음은 Plyr을 사용하여 음량 조절 기능을 추가하는 예시 코드입니다.

player.on('ready', function(event) {
  const volumeSlider = player.elements.volume.input;
  volumeSlider.addEventListener('input', function() {
    player.volume = volumeSlider.value;
  });
});

위의 코드에서는 일단 Plyr이 초기화된 후, 볼륨 슬라이더를 찾고 해당 슬라이더의 값이 변경될 때마다 플레이어의 볼륨을 업데이트합니다.

결론

이렇게 Plyr을 사용하여 웹 페이지에 음량 조절 기능을 추가할 수 있습니다. Plyr은 사용하기 간편하고 다양한 기능을 제공하여 더 나은 동영상 재생 경험을 제공합니다. Plyr 공식 홈페이지에서 문서와 예시를 참고하면 더 많은 기능을 활용할 수 있습니다.

참고: Plyr 공식 홈페이지

© 2018 Colin. All rights reserved.