오디오나 비디오가 재생을 시작할 준비가 되었을 때 특정 동작을 수행하려면 oncanplay 속성을 사용하면 됩니다. 이 속성은 미디어의 버퍼링이 충분히 이루어져 재생이 가능한 상태가 되는 순간 지정된 스크립트를 자동으로 실행합니다.
oncanplay 속성이란?
oncanplay는 HTML5 미디어 요소(<audio>, <video>)에서 사용할 수 있는 이벤트 속성입니다. 미디어 데이터가 일정 부분 로드되어 끊김 없이 재생할 수 있는 상태가 되면 브라우저가 이 이벤트를 발생시킵니다.
예제 코드
아래 코드를 실행하면 비디오가 재생 가능한 상태가 되었을 때 알림 창이 표시되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<video id = "myid" width = "320" height = "176" controls oncanplay="display()">
<source src = "/html5/foo.ogg" type = "video/ogg" />
<source src ="/html5/foo.mp4" type = "video/mp4" />
사용 중인 브라우저는 video 요소를 지원하지 않습니다.
</video>
<script>
function display() {
alert("비디오가 로드되었습니다!");
}
</script>
</body>
</html>코드 설명
위 예제에서 <video> 요소에 oncanplay="display()"가 설정되어 있습니다. 비디오 파일이 충분히 로드되어 재생이 가능해지는 순간 display() 함수가 호출되고, "비디오가 로드되었습니다!"라는 알림이 화면에 나타납니다.
참고 사항
- oncanplay 이벤트는 미디어 전체가 다운로드된 후가 아니라, 원활한 재생이 가능한 최소한의 데이터가 확보되는 시점에 발생합니다.
- 전체 미디어 로드가 완료된 시점을 감지하려면 oncanplaythrough 속성을 사용하는 것이 좋습니다.