Plyr은 HTML5 동영상 플레이어를 위한 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하여 동영상 플레이어를 커스터마이징하고 다양한 기능을 추가할 수 있습니다. 이번 블로그 포스트에서는 Plyr을 사용하여 동영상 플레이어에 공유 링크를 생성하는 방법을 알아보겠습니다.

Plyr 설치하기

먼저, Plyr을 사용하기 위해서는 해당 라이브러리를 프로젝트에 설치해야 합니다. Plyr은 npm을 통해 설치할 수 있습니다.

npm install plyr

HTML 마크업 작성하기

다음으로, Plyr 플레이어를 사용할 동영상 요소를 HTML로 작성해야 합니다.

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

위 코드에서 VIDEO_ID 부분에는 YouTube 동영상의 고유 ID를 넣어야 합니다.

JavaScript로 Plyr 초기화하기

Plyr 플레이어를 사용하기 위해 JavaScript 코드를 작성해야 합니다. Plyr을 초기화하고 공유 링크를 생성하는 코드는 다음과 같습니다.

import Plyr from 'plyr';

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

// 공유 링크 생성 함수
function generateShareLink() {
  const videoId = player.videoId; // Plyr 플레이어에서 현재 재생 중인 동영상의 ID 가져오기
  const shareLink = `https://www.example.com/video/${videoId}`; // 공유 링크 생성 (예시)

  alert(`Share link: ${shareLink}`);
}

// 공유 버튼 클릭 이벤트 리스너 등록
const shareButton = document.getElementById('share-button');
shareButton.addEventListener('click', generateShareLink);

위 코드에서 https://www.example.com/video/ 부분은 실제 프로젝트의 공유 링크 주소로 변경해야 합니다.

결과 확인하기

이제 프로젝트를 실행하여 Plyr 동영상 플레이어를 실행하고, 공유 버튼을 클릭하면 공유 링크가 생성되는지 확인해보세요.

결론

Plyr을 사용하여 동영상 플레이어에 공유 링크를 생성하는 방법에 대해 알아보았습니다. Plyr은 다양한 커스터마이징 옵션과 기능을 제공하므로, 필요에 따라 이를 활용하여 동영상 플레이어를 개발할 수 있습니다.