HTML의 ontimeupdate 속성은 동영상이나 오디오 같은 미디어의 재생 위치(currentTime)가 변경될 때 스크립트를 실행합니다. 사용자가 영상을 빨리 감기하거나 되감기할 때뿐만 아니라, 정상적으로 재생되는 도중에도 재생 시간이 계속 바뀌기 때문에 이 이벤트는 주기적으로 발생합니다.
ontimeupdate 속성이란?
ontimeupdate는 <audio> 및 <video> 요소에서 사용할 수 있는 이벤트 속성으로, 미디어의 현재 재생 위치가 바뀔 때마다 지정한 자바스크립트 함수를 호출합니다. 이를 활용하면 다음과 같은 기능을 구현할 수 있습니다.
- 현재 재생 시간을 실시간으로 화면에 표시
- 재생 진행률(progress bar) 업데이트
- 특정 구간 도달 시 특정 동작 실행
예제 코드
아래 코드는 ontimeupdate 속성을 활용해 동영상의 현재 재생 위치를 화면에 표시하는 예제입니다. 직접 실행해 보세요.
<!DOCTYPE html>
<html>
<body>
<h2 id="test">Play</h2>
<video id = "myid" width="320" height = "176" controls ontimeupdate = "myFunction()">
<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 myFunction() {
document.getElementById("test").innerHTML = "Current position: " +
document.getElementById("myid").currentTime;
}
</script>
</body>
</html>코드 설명
<video> 요소에 ontimeupdate = "myFunction()"을 지정하면, 재생 위치가 변경될 때마다 myFunction()이 호출됩니다. 함수 내부에서는 currentTime 속성을 읽어 현재 재생 위치(초 단위)를 가져온 뒤, id가 "test"인 요소의 내용을 갱신하여 화면에 표시합니다.
동영상을 재생하거나 재생 바를 드래그해 위치를 변경하면, "Current position:" 뒤에 실시간으로 현재 재생 시간이 출력되는 것을 확인할 수 있습니다.