[javascript] Video.js를 사용하여 동영상의 재생 시간을 표시하는 방법은 무엇인가요?
우선, Video.js 라이브러리를 HTML 문서에 추가해야 합니다. <head> 태그 내에 다음과 같이 스크립트를 추가합니다:
<head>
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.11.4/video.js"></script>
</head>
이제 동영상 플레이어를 생성하고 재생 시간을 표시하는 기능을 추가할 수 있습니다. <body> 태그 내에 다음과 같은 코드를 작성합니다:
<body>
<video id="my-video" class="video-js vjs-default-skin" controls width="640" height="360">
<source src="path/to/video.mp4" type="video/mp4" />
</video>
<script>
var player = videojs('my-video');
player.on('loadedmetadata', function() {
var duration = player.duration();
var formattedTime = player.duration( duration ).toString();
var durationDiv = document.createElement('div');
durationDiv.innerHTML = '재생 시간: ' + formattedTime;
var playerDiv = document.getElementById('my-video');
playerDiv.parentNode.insertBefore(durationDiv, playerDiv);
});
</script>
</body>
위 코드에서 path/to/video.mp4를 실제 동영상 파일의 경로로 대체해야 합니다. 코드는 loadedmetadata 이벤트가 발생할 때 재생 시간을 가져와서 동영상 플레이어 위에 새로운 div 요소를 추가합니다. 이 div 요소에 재생 시간이 표시됩니다.
이제 동영상을 재생하고 플레이어 위에 재생 시간이 표시되는지 확인할 수 있습니다. 이렇게 Video.js를 사용하여 동영상의 재생 시간을 표시하는 방법을 살펴보았습니다. 더 자세한 내용은 Video.js 공식 문서를 참조해주세요.