[javascript] Plyr을 사용하여 특정 동영상 장면에 북마크 추가하기

27 Nov 2023

javascript

Plyr은 HTML5 플레이어 라이브러리로, 다양한 동영상 소스를 플레이할 수 있는 기능을 제공합니다. 이 라이브러리를 사용하여 특정 동영상 장면에 북마크를 추가하는 방법을 알아보겠습니다.

Plyr 설치

Plyr을 사용하기 위해 먼저 해당 라이브러리를 프로젝트에 설치해야 합니다. npm을 사용한다면 다음 명령어를 실행하여 Plyr을 설치합니다:

npm install plyr

HTML 마크업

Plyr을 사용하기 위해 HTML 마크업에 동영상 요소를 추가해야 합니다. 다음은 Plyr을 사용하기 위한 기본적인 HTML 마크업 예시입니다:

<div class="plyr__video-embed">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>

<script src="path_to_plyr.js" type="text/javascript"></script>

북마크 추가하기

특정 동영상 장면에 북마크를 추가하려면 Plyr API를 사용해야 합니다. 다음은 Plyr API를 사용하여 특정 시간에 북마크를 추가하는 예시 코드입니다:

const player = new Plyr('#player'); // Plyr 객체 생성
const bookmarkButton = document.getElementById('bookmark-button');

bookmarkButton.addEventListener('click', function() {
  const currentTime = player.currentTime; // 현재 동영상 재생 시간 가져오기
  const bookmark = {
    time: currentTime,
    label: `Bookmark at ${currentTime.toFixed(2)}s`
  };
  
  // 북마크를 추가하는 로직 작성하기
  
  // 예시: 북마크를 리스트에 표시하는 경우
  const bookmarksContainer = document.getElementById('bookmarks');
  const bookmarkListItem = document.createElement('li');
  bookmarkListItem.textContent = bookmark.label;
  bookmarksContainer.appendChild(bookmarkListItem);
});

위 코드에서는 ‘bookmark-button’ ID를 가진 버튼을 클릭할 때마다 현재 동영상 재생 시간을 가져와 북마크 객체를 생성합니다. 이후 북마크를 추가하는 로직을 작성하면 됩니다. 예시로는 북마크를 리스트에 표시하는 코드를 작성했습니다.

결론

Plyr을 사용하여 특정 동영상 장면에 북마크를 추가하는 방법을 알아보았습니다. Plyr 라이브러리를 프로젝트에 설치하고, Plyr API를 사용하여 특정 시간에 북마크를 추가하는 로직을 작성할 수 있습니다.