[javascript] Plyr을 사용하여 동영상 플레이어에 소셜 공유 기능 추가하기

27 Nov 2023

javascript

Plyr은 유명한 오픈 소스 동영상 플레이어입니다. 이 플레이어를 사용하면 웹 사이트에 동영상을 쉽게 플레이할 수 있습니다. 이번에는 Plyr을 사용하여 동영상 플레이어에 소셜 공유 기능을 추가하는 방법에 대해 알아보겠습니다.

Plyr 설치하기

먼저 Plyr을 설치해야 합니다. npm을 사용하여 Plyr을 설치할 수 있습니다.

npm install plyr

또는 CDN을 통해 Plyr 스크립트를 가져올 수도 있습니다.

<script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />

소셜 공유 버튼 추가하기

Plyr에 소셜 공유 기능을 추가하기 위해 추가적인 HTML과 JavaScript 코드를 작성해야 합니다.

먼저 HTML에서 플레이어를 생성합니다.

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

플레이어에 소셜 공유 버튼을 추가하려면 다음과 같이 HTML 코드를 작성합니다.

<div class="plyr__controls">
  <button class="plyr__control" type="button" id="share-button">
    <i class="fa fa-share"></i>
  </button>
</div>

위의 코드에서 share-button은 소셜 공유 버튼의 ID입니다. 원하는 아이콘 또는 이미지로 교체할 수도 있습니다.

이제 JavaScript로 소셜 공유 기능을 추가합니다.

const shareButton = document.getElementById('share-button');
const videoEmbed = document.getElementById('player').querySelector('iframe');

shareButton.addEventListener('click', () => {
  const videoUrl = encodeURIComponent(videoEmbed.getAttribute('src'));
  const shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${videoUrl}`;

  window.open(shareUrl, '_blank');
});

위의 코드는 Facebook 공유를 예시로 사용하였으며, 다른 소셜 미디어와의 공유 기능을 추가할 수도 있습니다.

결론

이렇게 Plyr을 사용하여 동영상 플레이어에 소셜 공유 기능을 추가할 수 있습니다. 소셜 공유 버튼을 클릭하면 현재 재생 중인 동영상을 소셜 미디어에서 공유할 수 있습니다. Plyr의 다양한 기능을 사용하여 웹 사이트의 동영상 플레이어를 확장할 수도 있으니, 관심 있는 분들은 공식 문서를 참조해 보세요.

Plyr 설치하기

소셜 공유 버튼 추가하기

결론

참고 자료