[javascript] Video.js를 사용하여 동영상을 특정 시간으로 이동하거나 앞뒤로 스킵하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

Video.js는 HTML5 비디오 플레이어를 구현하는 데 도움이 되는 JavaScript 라이브러리입니다. Video.js를 사용하여 동영상을 특정 시간으로 이동하거나 앞뒤로 스킵하는 방법을 알아보겠습니다.

동영상을 특정 시간으로 이동하는 방법은 currentTime 속성을 사용하는 것입니다. currentTime은 현재 재생 중인 비디오의 재생 위치를 초 단위로 나타냅니다. 이 속성을 새로운 값을 할당하면 해당 시간으로 동영상을 이동할 수 있습니다.

아래는 Video.js를 사용하여 동영상을 특정 시간(10초)으로 이동하는 예시 코드입니다:

var video = videojs('my-video');

// 10초로 이동하는 함수
function skipToTime(time) {
  video.currentTime(time);
}

// 10초로 이동하기 버튼 클릭 시 이벤트 처리
document.getElementById('skip-button').addEventListener('click', function() {
  skipToTime(10);
});

동영상을 앞뒤로 스킵하는 방법은 currentTime 속성을 조작하여 구현할 수 있습니다. 예를 들어, currentTime 속성의 값을 증가시켜 동영상을 뒤로 스킵하거나 감소시켜 동영상을 앞으로 스킵할 수 있습니다.

아래는 Video.js를 사용하여 동영상을 앞뒤로 5초씩 스킵하는 예시 코드입니다:

var video = videojs('my-video');

// 앞으로 5초 스킵하는 함수
function skipForward() {
  video.currentTime(video.currentTime() + 5);
}

// 뒤로 5초 스킵하는 함수
function skipBackward() {
  video.currentTime(video.currentTime() - 5);
}

// 앞으로 5초 스킵하기 버튼 클릭 시 이벤트 처리
document.getElementById('skip-forward-button').addEventListener('click', function() {
  skipForward();
});

// 뒤로 5초 스킵하기 버튼 클릭 시 이벤트 처리
document.getElementById('skip-backward-button').addEventListener('click', function() {
  skipBackward();
});

위의 코드에서 my-video는 비디오 요소의 ID이며, skip-button, skip-forward-button, skip-backward-button는 각각 이동 또는 스킵을 수행하는 버튼의 ID입니다. 이렇게 Video.js를 사용하여 동영상을 특정 시간으로 이동하거나 앞뒤로 스킵할 수 있습니다.

더 자세한 정보 및 사용 방법은 Video.js 공식 문서를 참고하시기 바랍니다.