[javascript] Video.js를 사용하여 동영상 재생 중에 플레이어에 재생 시간 표시하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

플레이어에 재생 시간을 표시하는 방법은 다음과 같습니다.

Video.js를 다운로드하고 HTML 파일에 추가합니다.

<link href="path/to/video-js.min.css" rel="stylesheet">
<script src="path/to/video.min.js"></script>

HTML 비디오 요소를 생성하고 Video.js로 초기화합니다.

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264">
    <source src="path/to/video.mp4" type="video/mp4">
</video>
<script>
    var player = videojs('my-video');
</script>

Video.js의 timeupdate 이벤트를 감지하여 플레이어에 재생 시간을 업데이트합니다.

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264">
    <source src="path/to/video.mp4" type="video/mp4">
</video>
<script>
    var player = videojs('my-video');
    player.on('timeupdate', function() {
        var currentTime = player.currentTime();
        var duration = player.duration();
        var timeString = formatTime(currentTime) + ' / ' + formatTime(duration);
        document.getElementById('current-time').innerHTML = timeString;
    });

    function formatTime(seconds) {
        var minutes = Math.floor(seconds / 60);
        var remainingSeconds = Math.floor(seconds - minutes * 60);
        return padTime(minutes) + ':' + padTime(remainingSeconds);
    }

    function padTime(time) {
        return time.toString().padStart(2, '0');
    }
</script>

위의 코드는 Video.js를 사용하여 동영상 재생 중에 플레이어에 재생 시간을 표시하는 기능을 구현한 예시입니다. timeupdate 이벤트를 사용하여 currentTime()와 duration() 메소드를 이용해 현재 재생 시간과 전체 재생 시간을 가져옵니다. 이후 formatTime() 함수를 사용하여 시간을 특정 형식으로 포맷팅하여 current-time ID로 지정된 요소 내부 HTML에 업데이트합니다.

이를 위해 Video.js의 CSS와 JavaScript 파일을 추가하고, Video.js 객체를 생성하고 초기화해야 합니다. 비디오 요소는 ID가 my-video인 요소로 생성되었으며, timeupdate 이벤트를 player.on() 메소드를 사용해 감지합니다. HTML 요소 내부의 current-time ID로 지정된 요소는 시간이 업데이트될 때 해당 텍스트를 변경하게 됩니다.

해당 예시 코드를 기반으로 Video.js를 사용하여 동영상 플레이어에 재생 시간을 표시할 수 있습니다. 자세한 내용은 Video.js 공식 문서를 참조하시기 바랍니다.