소개
Plyr은 유연하고 사용하기 쉬운 HTML5 동영상 플레이어 라이브러리입니다. 이 라이브러리를 사용하면 동영상 재생, 일시정지, 탐색 등 다양한 기능을 간편하게 구현할 수 있습니다.
이번 블로그 포스트에서는 Plyr을 사용하여 동영상 플레이어에 스킵 기능을 추가하는 방법을 알아보겠습니다. 사용자가 원하는 지점으로 이동할 수 있는 스킵 버튼을 플레이어에 추가하는 예제를 제공하겠습니다.
구현 방법
1. Plyr 라이브러리 추가하기
먼저, HTML 파일의 <head> 태그 안에 Plyr 라이브러리를 추가합니다. 다음 코드를 사용하면 CDN을 통해 Plyr 라이브러리를 가져올 수 있습니다.
<script src="https://cdn.plyr.io/3.6.8/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
2. 동영상 플레이어 구성하기
동영상 플레이어를 구성하기 위해 <video> 태그와 <div> 태그를 사용합니다. Plyr 라이브러리의 기능을 활용하기 위해 data-plyr 속성을 추가합니다.
<div class="plyr__video-embed" data-plyr-provider="youtube" data-plyr-embed-id="VIDEO_ID">
<video controls>
<!-- 동영상 URL 또는 로컬 파일 경로 지정 -->
<source src="VIDEO_URL_OR_LOCAL_PATH" type="video/mp4">
</video>
</div>
3. Skip 버튼 생성하기
사용자가 스킵할 지점으로 이동할 수 있는 버튼을 생성합니다. 이 버튼을 클릭하면 Plyr 플레이어가 해당 지점으로 이동합니다.
<button class="skip-button" data-skip-to="30">30초 후 스킵</button>
<button class="skip-button" data-skip-to="60">1분 후 스킵</button>
4. 스킵 동작 구현하기
플레이어와 버튼을 구성한 뒤에, JavaScript 코드를 사용하여 스킵 동작을 구현합니다. Plyr 라이브러리의 setCurrentTime 함수를 사용하여 동영상 재생 위치를 설정할 수 있습니다.
const skipButtons = document.querySelectorAll('.skip-button');
const player = new Plyr('.plyr__video-embed');
skipButtons.forEach((button) => {
button.addEventListener('click', (e) => {
const skipTo = e.target.dataset.skipTo;
player.setCurrentTime(skipTo);
});
});
위의 코드는 Plyr 플레이어와 스킵 버튼을 선택하여 각 버튼을 클릭했을 때 setCurrentTime 함수를 호출하여 스킵 지점으로 이동하는 동작을 구현합니다.
결론
위의 예제를 참고하여 Plyr 동영상 플레이어에 스킵 기능을 추가하는 방법을 알아보았습니다. 이를 활용하여 사용자의 필요에 맞게 동영상 플레이어를 커스터마이징할 수 있습니다.
Plyr과 같은 플레이어 라이브러리를 사용하면 동영상 관련 기능을 효율적으로 구현할 수 있으므로, 프로젝트에 적용해 보시기 바랍니다.