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

27 Nov 2023

javascript

동영상 플레이어에 공유하기 기능을 추가하면 사용자들이 원하는 동영상을 쉽게 공유할 수 있습니다. 이번 블로그 글에서는 Plyr 라이브러리를 사용하여 동영상 플레이어에 공유하기 버튼을 추가하는 방법에 대해 알아보겠습니다.

Plyr이란?

Plyr은 HTML5 동영상 플레이어 라이브러리로서, 사용자 친화적인 인터페이스와 다양한 커스터마이징 기능을 제공합니다. Plyr을 사용하면 쉽게 동영상을 재생, 일시정지 및 탐색할 수 있습니다.

공유하기 버튼 추가하기

Plyr 라이브러리를 다운로드하고 웹 페이지에 추가합니다.

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

동영상 요소를 생성하고 Plyr로 초기화합니다.

 <video id="player" controls>
     <source src="path/to/video.mp4" type="video/mp4">
 </video>

 <script>
     const player = new Plyr('#player');
 </script>

공유하기 버튼을 추가하기 위해 템플릿을 작성합니다.

 <div class="plyr__controls">
     <!-- 기존 제어 버튼들... -->
        
     <!-- 공유하기 버튼 추가 -->
     <button class="plyr__control" type="button" id="share-button">
         <i class="fa fa-share"></i>
         Share
     </button>
 </div>

공유하기 버튼을 클릭했을 때 동작할 JavaScript 함수를 작성합니다.

 const shareButton = document.getElementById('share-button');
 shareButton.addEventListener('click', function() {
     // 공유하기 기능 구현
     const videoUrl = player.source;
     const shareUrl = 'https://www.example.com/share?video=' + videoUrl;
     window.open(shareUrl, '_blank');
 });

위의 코드를 참고하여 Plyr 라이브러리를 사용하여 동영상 플레이어에 공유하기 기능을 추가할 수 있습니다.

결론

Plyr을 사용하여 동영상 플레이어에 공유하기 기능을 추가할 수 있습니다. 이를 통해 사용자들은 손쉽게 원하는 동영상을 공유할 수 있으며, Plyr의 다양한 기능과 커스터마이징 옵션을 활용할 수 있습니다.

참고 자료

Plyr 공식 문서: https://plyr.io/
FontAwesome 아이콘: https://fontawesome.com/