웹 페이지에서 동영상이나 오디오를 재생하다 보면 네트워크 문제 등 다양한 이유로 브라우저가 미디어 데이터를 정상적으로 가져오지 못하는 경우가 발생합니다. 이럴 때 onstalled 속성을 사용하면 미디어 데이터 가져오기가 중단되었을 때 특정 스크립트를 자동으로 실행할 수 있습니다.
onstalled 속성이란?
onstalled 속성은 브라우저가 어떤 이유로든 미디어 데이터를 가져올 수 없을 때 지정된 스크립트를 실행하는 HTML 이벤트 속성입니다. 예를 들어, 서버 응답이 갑자기 중단되거나 네트워크 연결에 문제가 생겨 미디어 다운로드가 멈추는 상황에서 유용하게 활용됩니다.
적용 가능한 요소
onstalled 속성은 다음 두 가지 미디어 요소에 사용할 수 있습니다.
<video> <audio>
onstalled 속성 문법
<video> 요소에 적용하는 문법은 다음과 같습니다.
<video onstalled="script">
<audio> 요소에 적용하는 문법은 다음과 같습니다.
<audio onstalled="script">
onstalled 속성 사용 예제
아래 코드를 실행하여 onstalled 속성의 실제 동작을 확인해 볼 수 있습니다. 비디오 데이터를 가져오지 못하면 경고창이 표시됩니다.
<!DOCTYPE HTML>
<html>
<body>
<video width = "300" height = "200" controls onstalled ="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 ("Sorry! Video isn't available right now!");
}
</script>
</body>
</html>코드 설명
위 예제에서는 <video> 요소에 onstalled="display()"를 설정했습니다. 브라우저가 비디오 데이터를 가져오는 데 실패하면 display() 함수가 호출되고, "비디오를 현재 이용할 수 없습니다"라는 내용의 경고창이 화면에 나타납니다.
이처럼 onstalled 속성을 활용하면 미디어 로딩 실패 상황을 사용자에게 친절하게 안내하거나, 대체 콘텐츠를 표시하는 등의 후속 처리를 구현할 수 있습니다.