[javascript] Plyr을 사용하여 동영상 플레이어에 좋아요/싫어요 버튼 추가하기
이번 포스트에서는 JavaScript 라이브러리인 Plyr을 사용하여 동영상 플레이어에 좋아요/싫어요 버튼을 추가하는 방법을 알아보겠습니다.
Plyr 소개
Plyr은 HTML5 비디오 플레이어를 구축하기 위한 강력한 오픈 소스 라이브러리입니다. 자체적으로 UI를 가지고 있기 때문에 추가적인 스타일링이 필요하지 않으며, 다양한 커스텀 기능을 간편한 인터페이스로 제공합니다.
좋아요/싫어요 버튼 추가하기
- Plyr 라이브러리를 프로젝트에 추가하세요. 다운로드하여 HTML 파일에
<script>태그로 포함시키거나, CDN을 사용하세요.
<html>
<head>
<!-- Plyr 라이브러리 추가 -->
<script src="https://cdn.plyr.io/3.6.4/plyr.js"></script>
<!-- Plyr 스타일 시트 추가 -->
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.4/plyr.css">
</head>
<body>
<!-- 동영상을 담을 컨테이너 -->
<div class="video-container">
<video crossorigin playsinline controls poster="path/to/poster.jpg">
<source src="path/to/video.mp4" type="video/mp4">
</video>
</div>
<!-- Plyr 스크립트 -->
<script>
// Plyr 초기화
const player = new Plyr('.video-container');
</script>
</body>
</html>
- 좋아요/싫어요 버튼 엘리먼트를 HTML에 추가하세요. 이 예제에서는
<button>요소를 사용합니다.
<button id="like-button">좋아요</button>
<button id="dislike-button">싫어요</button>
- Plyr 이벤트 리스너를 사용하여 버튼 클릭 시 동작을 추가하세요.
<script>
// 좋아요 버튼 클릭 시 동작
document.getElementById('like-button').addEventListener('click', function() {
// TODO: 좋아요 버튼 동작을 구현하세요.
console.log('좋아요 버튼이 클릭되었습니다.');
});
// 싫어요 버튼 클릭 시 동작
document.getElementById('dislike-button').addEventListener('click', function() {
// TODO: 싫어요 버튼 동작을 구현하세요.
console.log('싫어요 버튼이 클릭되었습니다.');
});
</script>
이제 Plyr 라이브러리를 사용하여 동영상 플레이어에 좋아요/싫어요 버튼을 추가하는 방법을 알아보았습니다. 좋아요/싫어요 버튼의 동작은 각 버튼의 클릭 이벤트를 이용하여 구현하면 됩니다.
더 많은 Plyr 기능과 옵션에 대해서는 공식 문서를 참조하세요.