[javascript] Video.js를 사용하여 동영상 재생 중에 플레이어에 스킵 버튼 추가하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

먼저, Video.js 라이브러리가 페이지에 로드되어야 합니다. 로드하기 위해 아래의 코드를 HTML 문서의 <head> 태그 안에 추가해주세요:

<link href="https://vjs.zencdn.net/7.11.4/video-js.min.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>

그리고, 스킵 버튼을 추가할 비디오 요소를 만들고 DOM에 추가해야 합니다. 예를 들어, 아래와 같이 <video> 요소를 만들어서 비디오 파일을 지정할 수 있습니다:

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
    <source src="my-video.mp4" type="video/mp4">
</video>

그 다음, 스킵 버튼을 추가하기 위해 JavaScript 코드를 작성해야 합니다. Video.js는 player 객체를 제공하므로, 이를 활용하여 스킵 버튼을 추가할 수 있습니다. 아래 코드를 참고하세요:

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

player.ready(function() {
    // 플레이어가 준비되면 버튼을 추가합니다.
    var skipButton = player.controlBar.addChild('button', {
        text: '스킵',
        className: 'vjs-skip-button',
        onClick: function() {
            // 스킵 버튼이 클릭되었을 때 실행될 동작을 작성합니다.
            // 예를 들어, 비디오를 10초 앞으로 건너뛰는 코드입니다.
            player.currentTime(player.currentTime() + 10);
        }
    });

    // 버튼을 플레이어의 오른쪽에 추가합니다.
    player.controlBar.el().appendChild(skipButton.el());
});

위의 코드를 사용하면, Video.js 플레이어에 “스킵”이라는 텍스트를 가진 스킵 버튼이 추가됩니다. 이 버튼을 클릭하면 비디오 재생 시간이 10초씩 앞으로 이동합니다.

자세한 내용은 Video.js 공식 문서를 참고하시기 바랍니다.