동영상을 시청하다 보면 네트워크 상태에 따라 재생이 잠시 멈추고 버퍼링이 발생하는 경우가 있습니다. 이럴 때 사용자에게 상태를 알려주거나 특정 동작을 수행하고 싶다면 onwaiting 속성을 활용할 수 있습니다.
onwaiting 속성이란?
onwaiting은 HTML5 비디오(및 오디오) 요소에서 발생하는 이벤트 속성으로, 미디어 재생이 일시 중지되고 다음 프레임을 기다리기 위해 버퍼링이 시작될 때 트리거됩니다. 즉, 재생이 멈췄지만 곧 다시 재개될 것으로 예상되는 순간에 지정된 자바스크립트 함수가 실행됩니다.
이 속성을 사용하면 버퍼링 중임을 사용자에게 시각적으로 알려주는 로딩 표시기나 안내 메시지를 손쉽게 구현할 수 있습니다.
onwaiting 속성 구현 예제
아래 코드는 onwaiting 속성을 실제로 적용한 예제입니다. 동영상이 버퍼링되어 일시 중지되면 화면의 제목 텍스트가 변경됩니다.
<!DOCTYPE html>
<html>
<body>
<h2 id = "test">Play</h2>
<video id = "myid" width = "320" height = "176" controls onwaiting = "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 = "Media resumes again";
}
</script>
</body>
</html>코드 설명
위 예제의 핵심 부분을 살펴보겠습니다.
1. video 요소에 이벤트 등록
<video> 태그에 onwaiting = "myFunction()"을 추가하여, 버퍼링으로 인해 재생이 대기 상태에 들어갈 때 myFunction()이 호출되도록 설정했습니다.
2. 이벤트 발생 시 실행될 함수
자바스크립트의 myFunction()은 id가 "test"인 <h2> 요소의 내용을 "Media resumes again"이라는 문구로 변경합니다. 이를 통해 미디어가 일시 중지되었다가 곧 재개될 것임을 사용자에게 알려줄 수 있습니다.
3. 다중 소스 지원
<source> 태그를 두 개 사용해 OGG 형식과 MP4 형식을 모두 제공함으로써, 브라우저가 지원하는 형식을 자동으로 선택하도록 했습니다.
참고: 관련 미디어 이벤트
onwaiting과 함께 자주 사용되는 미디어 이벤트도 알아두면 유용합니다.
- onpause: 미디어 재생이 일시 정지되었을 때 발생
- onplaying: 일시 정지 또는 버퍼링 후 재생이 실제로 다시 시작되었을 때 발생
- onstalled: 미디어 데이터를 가져올 수 없어 재생이 지연될 때 발생
- onprogress: 미디어 데이터를 다운로드하는 동안 발생
이러한 이벤트들을 조합하면 버퍼링 상태 표시, 로딩 스피너, 재생 상태 안내 등 다양한 사용자 경험(UX) 개선 기능을 구현할 수 있습니다.