HTML에서 ondurationchange 속성은 오디오 또는 비디오의 재생 길이(듀레이션)가 변경되는 순간 자동으로 트리거되는 이벤트 속성입니다.
ondurationchange 속성이란?
브라우저가 미디어 파일의 메타데이터를 읽어 들이면 재생 시간(duration)이 처음 설정되며, 이때 ondurationchange 이벤트가 발생합니다. 또한 스트리밍 방식으로 콘텐츠를 제공하는 경우 서버에서 전송되는 데이터에 따라 길이 정보가 갱신될 때마다 이 이벤트가 다시 트리거됩니다.
이 속성은 동영상의 총 재생 시간을 사용자에게 표시하거나, 특정 구간만 재생하는 커스텀 플레이어를 만들 때 유용하게 활용할 수 있습니다.
사용 예제
아래 코드를 실행하면 ondurationchange 속성이 동작하는 과정을 직접 확인할 수 있습니다. 비디오의 길이 정보가 로드되는 순간 alert 창에 재생 시간이 초 단위로 표시됩니다.
<!DOCTYPE HTML>
<html>
<body>
<video width = "300" height = "200" controls ondurationchange = "display(this)">
<source src = "/html5/foo.ogg" type = "video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the video element.
</video>
<script>
function display(vLength) {
alert("Video Length: " + vLength.duration + " seconds");
}
</script>
</body>
</html>코드 설명
<video> 요소에 ondurationchange = "display(this)" 형태로 이벤트 핸들러를 지정하면, 길이가 변경될 때마다 display 함수가 호출됩니다. 함수 내부에서는 duration 속성을 통해 초 단위의 재생 시간 값을 가져와 alert 창으로 출력합니다.