미디어 데이터가 로드될 때 특정 스크립트를 실행하고 싶다면 onloadeddata 이벤트를 사용하면 됩니다. 이 이벤트는 비디오나 오디오 같은 미디어 요소의 첫 번째 프레임 데이터가 로드를 마쳤을 때 발생합니다.
onloadeddata 이벤트란?
onloadeddata 이벤트는 브라우저가 현재 재생 위치에서 미디어 데이터를 처음으로 로드했을 때 트리거됩니다. 이 시점부터 사용자가 재생 버튼을 누르지 않고도 프레임을 확인할 수 있으므로, 로딩 완료 후 UI 업데이트나 알림 표시 등의 작업을 처리하기에 적합합니다.
예제
다음 코드는 비디오가 로드되면 자동으로 알림 상자(alert)를 표시하는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<video controls onloadeddata = "display()">
<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() {
alert("Loaded!");
}
</script>
</body>
</html>코드 설명
<video> 태그에 onloadeddata = "display()" 속성을 추가하여, 비디오 데이터 로드가 완료되는 순간 display() 함수가 호출되도록 설정했습니다. 두 개의 <source> 태그를 사용해 OGG 형식과 MP4 형식을 모두 지원함으로써, 브라우저 호환성을 높였습니다.
이처럼 onloadeddata 이벤트를 활용하면 미디어 로딩이 완료된 시점에 맞춰 로딩 인디케이터 제거, 썸네일 표시 등 다양한 동작을 손쉽게 구현할 수 있습니다.