[javascript] Plyr을 사용하여 동영상 플레이어에 평점 기능 추가하기

27 Nov 2023

javascript

소개

Plyr은 HTML5 기반의 동영상 플레이어로, 사용하기 쉽고 많은 기능을 제공합니다. 이번 글에서는 Plyr을 사용하여 동영상 플레이어에 평점 기능을 추가하는 방법에 대해 알아보겠습니다.

평점 기능 구현하기

먼저 Plyr 라이브러리를 웹 페이지에 추가합니다.

<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>

동영상 플레이어를 웹 페이지에 추가합니다. 평점을 표시할 영역을 마련한 후, Plyr을 이용해 동영상 플레이어를 초기화합니다.

<div id="player"></div>
<div id="rating"></div>

<script>
const player = new Plyr('#player');
</script>

평점을 표시할 영역에 별점 선택을 위한 HTML 요소를 추가합니다. 각 별점에는 클릭 이벤트를 추가하여 선택한 별점을 저장합니다.

<div id="rating">
  <label for="star-1">1 star</label>
  <input type="radio" id="star-1" name="rating" value="1" />
  <label for="star-2">2 stars</label>
  <input type="radio" id="star-2" name="rating" value="2" />
  <label for="star-3">3 stars</label>
  <input type="radio" id="star-3" name="rating" value="3" />
  <label for="star-4">4 stars</label>
  <input type="radio" id="star-4" name="rating" value="4" />
  <label for="star-5">5 stars</label>
  <input type="radio" id="star-5" name="rating" value="5" />
</div>

별점을 선택하면 선택한 별점을 저장하고, 해당 값을 서버에 전달하는 JavaScript 코드를 작성합니다.

const ratings = document.getElementsByName('rating');
let selectedRating = null;

for (const rating of ratings) {
  rating.addEventListener('click', function() {
    selectedRating = this.value;
    // 서버에 selectedRating 값을 전달하는 코드 작성
  });
}

Plyr에서 제공하는 이벤트를 이용하여 동영상의 재생이 완료되었을 때, 선택한 평점을 초기화합니다.

player.on('ended', function() {
  selectedRating = null;
  // 평점을 서버에 저장하는 코드 작성
});

결론

Plyr을 사용하여 동영상 플레이어에 평점 기능을 추가하는 방법에 대해 알아보았습니다. 이제 당신은 Plyr을 사용해 동영상 플레이어에 다양한 기능을 구현할 수 있습니다. Plyr의 다양한 기능과 옵션을 자세히 알아보고, 웹 어플리케이션에 유용한 기능을 추가해보세요.

소개

평점 기능 구현하기

결론

참고 자료