Plyr은 HTML5 비디오 플레이어 라이브러리로, 사용자가 비디오를 제어하고 다양한 기능을 제공하는 데 도움이 됩니다. 비디오를 특정 시간으로 스킵하는 기능을 추가하려면 Plyr의 API를 사용하여 비디오를 구성하고 조작해야 합니다.

먼저, Plyr 라이브러리를 웹 페이지에 추가합니다. 다음과 같이 <script> 태그를 사용하여 Plyr.js 파일을 포함시킬 수 있습니다.

<script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>

다음으로, 비디오 엘리먼트를 HTML에 추가합니다.

<video id="myVideo" controls>
  <source src="video.mp4" type="video/mp4">
</video>

이제 JavaScript 코드를 사용하여 Plyr 플레이어를 설정하고 비디오를 조작할 수 있습니다.

// Plyr 인스턴스 생성
const player = new Plyr('#myVideo');

// 특정 시간으로 비디오 스킵
function skipToTime(time) {
  player.currentTime = time;
}

// 10초로 스킵하는 버튼 클릭 시 이벤트 처리
const skipButton = document.getElementById('skipButton');
skipButton.addEventListener('click', function() {
  skipToTime(10);
});

위의 코드에서 skipToTime 함수는 비디오를 특정 시간으로 스킵하는 기능을 구현합니다. player.currentTime을 설정하여 해당 시간으로 비디오를 이동시킬 수 있습니다. 이 예제에서는 10초로 스킵하는 버튼 클릭 시 해당 시간으로 이동하도록 설정하였습니다.

Plyr의 자세한 사용법에 대해서는 공식 문서를 참조하시기 바랍니다.