HTML에서 브라우저가 미디어 데이터(비디오 또는 오디오)를 불러오는 과정에 있을 때 특정 스크립트를 실행하려면 onprogress 속성을 사용하면 됩니다.
onprogress 이벤트는 미디어 데이터가 다운로드되는 동안 주기적으로 발생합니다. 따라서 로딩 진행 상황을 사용자에게 알리거나, 로딩 상태에 따라 UI를 업데이트하는 등의 작업에 유용하게 활용할 수 있습니다.
예제
다음 코드를 실행하여 onprogress 속성을 직접 구현해 보세요. 비디오 데이터가 로드되는 동안 경고창이 표시됩니다.
<!DOCTYPE html>
<html>
<body>
<video id = "myVideo" width = "320" height = "176" controls onprogress = "display()">
<source src = "/html5/foo.ogg" type = "video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
Your browser does not support HTML5 video.
</video>
<script>
function display() {
alert("Started");
}
</script>
</body>
</html>코드 설명
위 예제에서 <video> 요소에 onprogress 속성을 추가하고, 값으로 JavaScript 함수인 display()를 지정했습니다. 브라우저가 비디오 데이터를 가져오는 동안 이 함수가 호출되어 "Started"라는 경고 메시지가 화면에 나타납니다.
두 개의 <source> 태그를 사용하여 OGG 형식과 MP4 형식의 비디오를 각각 제공함으로써, 다양한 브라우저 환경에서도 비디오가 정상적으로 재생되도록 했습니다.