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

27 Nov 2023

javascript

Plyr은 HTML5 동영상 플레이어 라이브러리로, 사용자 친화적인 사용자 인터페이스와 다양한 기능을 제공합니다. 이번 글에서는 Plyr을 사용하여 동영상 플레이어에 댓글 기능을 추가하는 방법을 알아보겠습니다.

Plyr 설치

먼저, Plyr을 사용하기 위해 npm을 통해 Plyr을 설치해야 합니다. 아래의 명령어를 사용하여 Plyr을 설치하세요.

npm install plyr

HTML 마크업

다음으로, 댓글 기능을 추가할 동영상 플레이어를 HTML 마크업에 작성해야 합니다. 예를 들어, 다음과 같은 HTML 코드를 작성할 수 있습니다.

<div class="plyr__video-embed" id="player">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
</div>

<div id="comments"></div>

위 코드에서 plyr__video-embed 클래스가 추가된 div 요소는 Plyr 플레이어로 사용될 영역을 정의하는 역할을 합니다. 플레이어를 초기화할 때, 이 div 요소를 대상으로 지정해야 합니다.

실제 댓글이 표시될 영역을 정의하기 위해 comments라는 id를 가진 또 다른 div 요소를 추가했습니다.

JavaScript 초기화

Plyr 플레이어 및 댓글 기능을 초기화하기 위해 JavaScript 코드를 작성해야 합니다. 아래의 예시 코드를 참고하세요.

import Plyr from 'plyr';

const player = new Plyr('#player');

function loadComments(videoId) {
  // 서버에서 댓글을 가져오는 로직을 작성하세요.
  // 예시로, 여기서는 xhr 요청을 통해 댓글을 가져옵니다.
  const xhr = new XMLHttpRequest();
  xhr.open('GET', `/comments?videoId=${videoId}`, true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const comments = JSON.parse(xhr.responseText);
      renderComments(comments);
    }
  };
  xhr.send();
}

function renderComments(comments) {
  const commentsContainer = document.getElementById('comments');
  commentsContainer.innerHTML = '';

  // 가져온 댓글을 HTML로 렌더링하는 로직을 작성하세요.
  comments.forEach(comment => {
    const commentElement = document.createElement('div');
    commentElement.textContent = comment.text;
    commentsContainer.appendChild(commentElement);
  });
}

// Plyr 재생이 시작될 때 댓글을 가져오도록 이벤트 리스너를 등록합니다.
player.on('play', () => {
  const videoId = extractVideoId(player.source);
  loadComments(videoId);
});

function extractVideoId(url) {
  // 동영상 URL에서 비디오 ID를 추출하는 로직을 작성하세요.
  // 예시로, 여기서는 YouTube URL에서 비디오 ID를 추출합니다.
  const videoId = url.match(/embed\/(.*)/)[1];
  return videoId;
}

위의 예시 코드에서, Plyr 객체를 사용하여 영상 플레이어를 초기화하고, loadComments 함수를 사용하여 서버에서 댓글을 가져옵니다. 그리고 renderComments 함수를 사용하여 가져온 댓글을 HTML로 렌더링하여 화면에 표시합니다.

플레이어의 재생이 시작될 때 play 이벤트가 발생하고, 이를 통해 댓글을 가져오도록 구현하였습니다. extractVideoId 함수는 동영상 URL에서 비디오 ID를 추출하기 위한 로직을 담고 있습니다.

결론

위의 예시 코드를 참고하여 Plyr 동영상 플레이어에 댓글 기능을 추가할 수 있습니다. Plyr 라이브러리의 다른 기능들도 문서를 참고하여 활용해보세요.

참고 자료:

Plyr 공식 문서