HTML DOM Video duration 속성이란?
HTML DOM의 Video duration 속성은 해당 동영상의 전체 길이를 나타내는 숫자를 반환합니다. 이때 반환되는 값의 단위는 초(seconds)입니다.
참고: 라이브 스트리밍처럼 미리 정해진 재생 시간이 없는 영상의 경우, duration 속성은 무한대를 의미하는 'Inf'를 반환합니다.
구문
duration 속성의 기본 구문은 다음과 같습니다.
mediaObject.duration
별도의 매개변수 없이 호출하며, 동영상의 길이에 해당하는 숫자 값을 반환합니다.
예제
이제 HTML DOM Video duration 속성을 활용한 실제 예제를 살펴보겠습니다. 아래 코드는 버튼을 클릭하면 동영상의 총 길이를 화면에 표시합니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video duration</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Video-duration</legend>
<video id="demo" width="320" controls><source src="https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br>
<input type="button" onclick="getTrackDetails()" value="How many seconds of content is this video?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var demo = document.getElementById("demo");
function getTrackDetails() {
divDisplay.textContent = 'Duration: '+demo.duration+' seconds';
}
</script>
</body>
</html>실행 결과
'How many seconds of content is this video?' 버튼을 클릭하기 전 화면입니다.
버튼을 클릭한 후에는 아래와 같이 동영상의 길이가 초 단위로 표시됩니다.
추가 팁
동영상의 메타데이터가 아직 로드되지 않은 상태에서 duration 속성에 접근하면 NaN(Not a Number)이 반환될 수 있습니다. 따라서 정확한 값을 얻으려면 loadedmetadata 이벤트 발생 후에 duration 값을 읽어오는 것이 안전합니다.