Plyr은 사용하기 쉬운 HTML5 동영상 플레이어 라이브러리입니다. 이 라이브러리는 최신 브라우저에서 제공하는 웹 API를 사용하여 동영상을 플레이할 수 있도록 도와줍니다. 이번 블로그 포스트에서는 Plyr을 사용하여 동영상 플레이어에 좋아요/싫어요 기능을 추가하는 방법을 살펴보겠습니다.
Plyr 설치하기
Plyr을 사용하기 위해서는 먼저 Plyr 라이브러리를 프로젝트에 설치해야 합니다. npm을 사용하신다면 아래 명령어를 실행하여 Plyr을 설치할 수 있습니다.
npm install plyr
HTML 구성하기
먼저, Plyr을 사용하여 동영상을 플레이할 때 필요한 HTML 구조를 만들어야 합니다. 아래는 동영상을 플레이할 <div> 요소와 좋아요/싫어요 버튼을 표시할 버튼 요소의 예시입니다.
<div id="player-container">
<video playsinline controls>
<source src="video.mp4" type="video/mp4">
</video>
</div>
<button id="like-button">좋아요</button>
<button id="dislike-button">싫어요</button>
Plyr 초기화하기
Plyr을 사용하기 위해선, 우선 Plyr 객체를 생성하고 초기화해야 합니다. 아래는 Plyr 객체를 생성하고 동영상 플레이어를 초기화하는 예시입니다.
import Plyr from 'plyr';
const player = new Plyr('#player-container');
좋아요/싫어요 기능 추가하기
이제 좋아요/싫어요 기능을 추가해보겠습니다. 버튼을 클릭할 때마다 좋아요/싫어요 수를 증가시킬 수 있는 간단한 예시 코드를 작성해보겠습니다.
const likeButton = document.getElementById('like-button');
const dislikeButton = document.getElementById('dislike-button');
let likeCount = 0;
let dislikeCount = 0;
likeButton.addEventListener('click', () => {
likeCount++;
console.log(`좋아요 수: ${likeCount}`);
});
dislikeButton.addEventListener('click', () => {
dislikeCount++;
console.log(`싫어요 수: ${dislikeCount}`);
});
위 예시 코드에서는 좋아요 버튼과 싫어요 버튼을 클릭할 때마다 해당 수를 증가시키고 콘솔에 출력하도록 설정하였습니다. 이제 이 코드를 원하는 방식으로 수정하여 실제로 데이터를 저장하거나 표시할 수 있습니다.
마무리
위의 예시 코드를 통해 Plyr을 사용하여 동영상 플레이어에 좋아요/싫어요 기능을 추가하는 방법을 알아보았습니다. Plyr은 강력하고 유연한 동영상 플레이어 라이브러리이며, 여러 기능과 커스터마이징 옵션을 제공합니다. Plyr의 공식 문서를 참고하여 추가 기능을 구현해보세요!