Colin's Blog
[javascript] Video.js를 사용하여 동영상 재생 중에 플레이어에 이전/다음 트랙 버튼 추가하는 방법은 어떻게 되나요?

Video.js를 사용하여 동영상 재생 중에 플레이어에 이전/다음 트랙 버튼 추가하는 방법

Video.js를 사용하여 동영상 플레이어에 이전과 다음 트랙 버튼을 추가하는 방법을 알아보겠습니다.

Video.js 설치

먼저, Video.js를 설치해야 합니다. 아래 명령을 사용하여 npm을 통해 Video.js를 설치하세요.

npm install video.js

HTML 파일 작성

Video.js를 사용하기 위해 HTML 파일을 작성해야 합니다. 아래는 기본적인 구조의 예시입니다.

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/video.js/dist/video-js.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/video.js/dist/video.min.js"></script>
</head>
<body>
    <video id="my-video" class="video-js" controls>
        <source src="video.mp4" type="video/mp4">
    </video>
</body>
</html>

트랙 버튼 추가

이전과 다음 트랙 버튼을 추가하기 위해 JavaScript 코드를 작성해야 합니다. 아래 예시를 참고하세요.

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

// 이전 트랙 버튼 생성
myPlayer.controlBar.addChild('button', {
    text: '이전 트랙',
    className: 'vjs-previous-button',
    clickListener: function() {
        // 이전 트랙 로직 구현
        // ex) myPlayer.src('previous_video.mp4');
    }
});

// 다음 트랙 버튼 생성
myPlayer.controlBar.addChild('button', {
    text: '다음 트랙',
    className: 'vjs-next-button',
    clickListener: function() {
        // 다음 트랙 로직 구현
        // ex) myPlayer.src('next_video.mp4');
    }
});

위 코드에서 my-video는 비디오 엘리먼트의 ID입니다. clickListener 내부에서 이전/다음 트랙의 로직을 구현해야 합니다. 예를 들어 myPlayer.src()을 사용하여 이전/다음 트랙의 URL을 전달할 수 있습니다.

이제 위 방법을 사용하여 Video.js 플레이어에 이전과 다음 트랙 버튼을 추가하실 수 있습니다.

추가적인 사용법과 확장 기능에 대해서는 Video.js 공식 문서를 참고하시면 도움이 될 것입니다.

© 2018 Colin. All rights reserved.