[javascript] Plyr을 사용하여 음소거 기능 추가하기

27 Nov 2023

javascript

Plyr은 HTML5 비디오 및 오디오 플레이어의 자바스크립트 라이브러리입니다. 이 라이브러리는 다양한 기능과 사용자 정의 옵션을 제공하여 웹 사이트나 앱에서 멋진 미디어 플레이어를 만들 수 있도록 도와줍니다.

이번에는 Plyr을 사용하여 음소거 기능을 추가하는 방법에 대해 알아보겠습니다.

1. Plyr 라이브러리 추가하기

먼저 Plyr 라이브러리를 HTML 문서에 추가해야 합니다. Plyr은 CDN을 통해 제공되기 때문에 다음과 같이 <head> 태그 안에 다음 코드를 추가하세요.

<head>
  <link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />
  <script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>
</head>

2. HTML 비디오 요소 추가하기

Plyr을 사용하여 음소거 기능을 추가하기 위해 비디오 요소를 추가해야 합니다. HTML 문서에 <video> 태그를 추가하세요. 예를 들면:

<video id="player" controls>
  <source src="video.mp4" type="video/mp4" />
</video>

3. 자바스크립트 코드 추가하기

이제 자바스크립트 코드를 추가하여 Plyr의 음소거 기능을 활성화시킬 수 있습니다. <script> 태그 안에 다음 코드를 추가하세요.

<script>
  const player = new Plyr('#player');
  
  player.on('ready', () => {
    const muteButton = document.querySelector('.plyr__controls__item.plyr__mute');
    
    muteButton.addEventListener('click', () => {
      if (player.isMuted()) {
        player.unmute();
      } else {
        player.mute();
      }
    });
  });
</script>

위 코드는 Plyr 플레이어를 초기화하고, 음소거 버튼을 클릭했을 때 음소거 상태를 토글하는 기능을 구현합니다.

4. 스타일 커스터마이징하기 (옵션)

Plyr은 다양한 스타일 커스터마이징 옵션을 제공합니다. 만약 플레이어의 외관을 변경하고 싶다면, plyr.css 파일을 수정하거나 CSS를 사용하여 스타일을 변경할 수 있습니다.

예를 들어 비디오 플레이어의 색상을 변경하고 싶다면, 다음과 같이 CSS를 추가하세요.

<style>
  .plyr--video .plyr__controls {
    background-color: #f8f8f8;
    color: #333;
  }
</style>

위 코드는 플레이어의 배경색과 텍스트 색상을 변경합니다.

결론

Plyr을 사용하여 음소거 기능을 추가하는 방법에 대해 알아보았습니다. Plyr은 사용하기 쉽고 다양한 옵션을 제공하여 웹 사이트에 멋진 미디어 플레이어를 구현할 수 있습니다. 추가로 Plyr 공식 문서를 참고하여 더 많은 기능을 알아보세요.

라이브러리 링크: Plyr 공식 문서 링크: Plyr Documentation