Plyr은 HTML5 비디오 플레이어를 쉽고 간편하게 커스터마이징할 수 있는 자바스크립트 라이브러리입니다. 이번 블로그 포스트에서는 Plyr을 사용하여 동영상 플레이어에 찜하기 버튼을 추가하는 방법에 대해 알아보겠습니다.

Plyr 설치하기

먼저, Plyr을 다운로드하고 웹 페이지에 추가해야 합니다. 아래의 코드를 사용하여 Plyr을 로드할 수 있습니다.

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

찜하기 버튼 추가하기

Plyr를 성공적으로 설치했다면, 이제 찜하기 버튼을 추가할 수 있습니다. 찜하기 버튼을 클릭하면 선택한 동영상을 찜 목록에 추가할 수 있습니다.

<div class="plyr__controls">
  <button class="plyr__control" id="like-button" aria-label="찜하기">
    <i class="fas fa-heart"></i>
  </button>
</div>

위의 코드에서 plyr__controls 클래스는 Plyr 플레이어의 컨트롤러를 감싸는 부모 요소이고, plyr__control 클래스는 버튼을 나타냅니다. id 속성은 버튼에 고유한 식별자를 제공합니다.

JavaScript로 기능 추가하기

이제 JavaScript를 사용하여 찜하기 버튼의 동작을 구현해보겠습니다. 아래의 코드를 사용하면 Plyr 플레이어와 찜하기 버튼을 연결할 수 있습니다.

const player = new Plyr('#video-player');
const likeButton = document.querySelector('#like-button');

likeButton.addEventListener('click', () => {
  // 찜하기 버튼을 클릭했을 때의 동작을 여기에 작성하세요
});

위의 코드에서 #video-player는 Plyr 플레이어의 ID입니다. 실제로 Plyr 플레이어의 ID를 사용하여 player 객체를 생성하고, likeButton 변수를 사용하여 버튼 요소를 가져옵니다. click 이벤트에 대한 리스너를 추가하여 버튼이 클릭되었을 때 실행될 코드를 작성하면 됩니다.

찜하기 기능 구현하기

찜하기 버튼이 클릭되었을 때 동작을 구현해보겠습니다. 예를 들어, 찜 목록에 동영상을 추가하는 기능을 구현해보겠습니다.

likeButton.addEventListener('click', () => {
  // 동영상을 찜 목록에 추가하는 코드를 작성하세요
  addToFavorites();
});

function addToFavorites() {
  // 동영상을 찜 목록에 추가하는 로직을 작성하세요
  // 예: API 요청이나 로컬 스토리지 사용 등
  console.log('동영상을 찜 목록에 추가했습니다.');
}

위의 예제에서는 addToFavorites() 함수를 사용하여 동영상을 찜 목록에 추가하는 로직을 작성했습니다. 여기에서는 단순히 콘솔에 메시지를 출력하는 것으로 대체하였습니다. 실제로는 여러분의 요구사항에 맞게 API 요청이나 로컬 스토리지를 사용하여 구현할 수 있습니다.

마무리

이제 Plyr을 사용하여 동영상 플레이어에 찜하기 버튼을 추가하는 방법에 대해 알아보았습니다. 이 기능을 구현할 때는 Plyr과 JavaScript를 함께 사용하여 플레이어와 버튼을 연결하고, 찜하기 기능을 구현할 수 있습니다. 다양한 기능을 추가하여 동영상 플레이어를 더욱 흥미로운 사용자 경험으로 만들어보세요.