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

24 Nov 2023

javascript

Video.js는 HTML5 비디오 플레이어 라이브러리로서, 많은 기능과 확장성을 제공합니다. 동영상 재생 중에 특정 부분을 하이라이트 표시할 수 있는 기능을 추가해보겠습니다.

Video.js 라이브러리를 HTML 문서에 추가합니다. <head> 태그 안에 다음 코드를 삽입합니다.

<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>

동영상을 플레이어에 추가합니다. <body> 태그 안에 다음 코드를 추가합니다.

<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
    <source src="my-video.mp4" type="video/mp4">
</video>

my-video.mp4 부분은 재생할 동영상 파일의 경로로 변경해야 합니다.

JavaScript 코드를 추가하여 하이라이트 기능을 구현합니다. <body> 태그 아래에 다음 코드를 추가합니다.

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

player.on('timeupdate', function() {
    var currentTime = player.currentTime();
    var highlights = [
        {
            start: 10,
            end: 20,
            color: 'yellow'
        },
        {
            start: 30,
            end: 40,
            color: 'red'
        }
    ];

    for (var i = 0; i < highlights.length; i++) {
        var highlight = highlights[i];
        if (currentTime >= highlight.start && currentTime <= highlight.end) {
            player.addClass('highlight-' + highlight.color);
        } else {
            player.removeClass('highlight-' + highlight.color);
        }
    }
});

위의 코드에서는 timeupdate 이벤트를 사용하여 재생 시간이 변경될 때마다 하이라이트를 표시하거나 제거합니다. highlights 배열에는 하이라이트할 구간의 시작 시간, 종료 시간, 및 색상이 지정되어 있습니다.

CSS 스타일을 추가하여 하이라이트를 시각적으로 나타냅니다. <head> 태그 안에 다음 코드를 추가합니다.

<style>
.video-js.highlight-yellow .vjs-progress-holder .vjs-play-progress, 
.video-js.highlight-red .vjs-progress-holder .vjs-play-progress {
    background-color: yellow;
}
.video-js.highlight-red .vjs-progress-holder .vjs-play-progress {
    background-color: red;
}
</style>

위 코드에서는 .video-js.highlight-{color} 클래스를 사용하여 해당 구간에 대한 하이라이트 스타일을 정의하고 있습니다. highlight-yellow와 highlight-red는 JavaScript 코드에서 지정한 색과 동일해야 합니다.

이제 동영상을 재생하면 지정한 구간에 따라 플레이어에 하이라이트가 표시됩니다. 필요한 구간과 색상을 원하는대로 수정하여 사용할 수 있습니다.

참고 자료:

Video.js 공식 문서: https://videojs.com/
Video.js GitHub 저장소: https://github.com/videojs/video.js