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

24 Nov 2023

javascript

우선, Video.js를 웹 페이지에 추가해야 합니다. 아래의 예제 코드를 참고하여 HTML 문서에 Video.js 스크립트를 추가하세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Video.js 예제</title>
  <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>
</head>
<body>
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="360" data-setup="{}">
    <source src="my-video.mp4" type="video/mp4">
    <!-- 재생 중인 비디오 파일의 경로를 적절히 수정하세요. -->
  </video>
</body>
</html>

위의 예제 코드에서 my-video.mp4 부분을 재생하고자 하는 동영상 파일의 경로로 수정해주세요.

이제, Video.js를 초기화하고 비디오 정보를 표시하는 기능을 추가할 차례입니다. 아래의 예제 코드를 참고하여 JavaScript를 작성하세요.

document.addEventListener('DOMContentLoaded', function() {
  var player = videojs('my-video');
  
  player.on('timeupdate', function() {
    var currentTime = player.currentTime();
    var duration = player.duration();
    
    console.log('현재 시간: ' + currentTime + ', 전체 시간: ' + duration);
    // 원하는 방식으로 정보를 표시하거나 활용하세요.
  });
});

위의 코드는 Video.js의 timeupdate 이벤트를 사용하여 재생 중인 비디오의 현재 시간과 전체 시간을 확인하는 예제입니다. console.log()를 사용하여 브라우저 콘솔에 정보를 출력합니다. 필요에 따라 이를 활용하여 웹 페이지의 특정 요소에 정보를 표시하거나 원하는 방식으로 활용할 수 있습니다.

위의 코드에서 사용된 my-video는 앞서 HTML에서 동영상 요소의 id로 설정한 값입니다. 만약 다른 id를 사용하셨다면 코드를 수정하여 적절히 변경해주셔야 합니다.

이렇게 작성한 코드를 웹 페이지에 추가하면 Video.js를 통해 재생 중인 비디오의 정보를 효과적으로 표시할 수 있습니다. 참고로, Video.js에는 다양한 기능과 설정이 있으니 공식 문서 등을 참고하여 더 자세히 알아보시기 바랍니다.