Plyr은 웹에서 사용할 수 있는 강력한 동영상 플레이어 라이브러리입니다. 이 라이브러리를 사용하면 HTML5 비디오 플레이어를 쉽게 만들고 커스터마이즈할 수 있습니다. 이번 블로그 포스트에서는 Plyr을 사용하여 동영상 플레이어에 공유 버튼을 추가하는 방법을 알아보겠습니다.

Plyr 설치하기

Plyr를 사용하기 위해 먼저 필요한 파일들을 다운로드 받아야 합니다. Plyr의 최신 버전은 GitHub 리포지토리에서 확인할 수 있습니다.

<link rel="stylesheet" href="path/to/plyr.css">
<script src="path/to/plyr.js"></script>

HTML 구조 생성하기

동영상 플레이어를 만들기 위해 필요한 HTML 구조를 생성합니다. Plyr은 <video> 요소를 사용하여 동영상을 재생합니다. 공유 버튼은 <button> 요소로 추가될 것입니다.

<div class="plyr__video-embed">
  <video src="path/to/video.mp4"></video>
  <button class="plyr__share">공유</button>
</div>

JavaScript 코드 작성하기

Plyr은 자바스크립트를 사용하여 동작하므로, JavaScript 코드를 작성하여 공유 버튼의 동작을 구현해야 합니다.

const player = new Plyr('.plyr__video-embed'); // Plyr 초기화

const shareButton = document.querySelector('.plyr__share'); // 공유 버튼 요소 선택

// 공유 버튼 클릭 시 동작 설정
shareButton.addEventListener('click', () => {
  const videoUrl = player.source.currentSrc; // 현재 재생 중인 동영상의 URL 가져오기
  const shareUrl = `https://example.com/share?video=${encodeURIComponent(videoUrl)}`; // 공유할 링크 생성

  // 공유하기
  if (navigator.share) {
    navigator.share({
      title: '동영상 공유',
      url: shareUrl
    })
      .then(() => console.log('공유 성공'))
      .catch(error => console.log('공유 실패:', error));
  } else {
    console.log('웹 브라우저가 공유 기능을 지원하지 않습니다.');
  }
});

스타일링하기

공유 버튼에 스타일을 적용하여 원하는 모양으로 꾸밀 수 있습니다. CSS를 사용하여 버튼의 색상, 크기 등을 바꿀 수 있습니다.

.plyr__share {
  background-color: #007bff;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

결과 확인하기

모든 작업을 마쳤으면 웹 페이지를 열어 동영상 플레이어를 확인해보세요. 동영상 재생 중에 공유 버튼을 클릭하면, 공유할 수 있는 링크가 생성되고 공유 기능을 지원하는 브라우저에서는 바로 공유할 수 있습니다.

이렇게 Plyr을 사용하여 동영상 플레이어에 공유 버튼을 추가하는 방법을 알아보았습니다. Plyr은 확장성이 높은 동영상 플레이어 라이브러리이므로, 원하는 기능을 추가해서 사용할 수 있습니다.

더 자세한 내용은 Plyr의 공식 문서를 참고하세요.

(이 글은 Plyr 3.6.8 기준으로 작성되었습니다.)