HTML5 비디오를 완전히 사전 로드(preload)하려면 oncanplaythrough 이벤트를 활용할 수 있습니다. 이 이벤트는 비디오가 버퍼링 없이 끝까지 재생할 수 있을 만큼 충분히 로드되었을 때 발생합니다. 즉, 사용자가 영상을 중단 없이 매끄럽게 시청할 수 있는 상태임을 브라우저가 판단한 시점에 트리거됩니다.
oncanplaythrough 이벤트란?
oncanplaythrough는 미디어 요소에서 지원하는 표준 이벤트로, 현재 다운로드 속도 기준으로 남은 데이터를 모두 받아도 재생이 멈추지 않을 것으로 예상될 때 호출됩니다. 대용량 영상을 미리 불러와 사용자 경험을 개선하고 싶을 때 특히 유용합니다.
예제 코드
다음 코드는 oncanplaythrough 이벤트를 사용해 비디오가 완전히 로드되었을 때 알림을 표시하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" width="400" height="200" controls oncanplaythrough="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> 태그의 oncanplaythrough 속성에 display() 함수를 연결하여, 비디오가 완전히 로드되면 자동으로 실행되도록 설정했습니다.
- <source> 요소를 여러 개 두어 OGG와 MP4 형식을 순차적으로 시도함으로써 다양한 브라우저 환경에서 호환성을 확보했습니다.
- 비디오 요소를 지원하지 않는 구형 브라우저를 위한 대체 텍스트도 함께 포함되어 있습니다.
참고 사항
모바일 환경에서는 데이터 절약 정책 때문에 자동 전체 로드가 제한될 수 있으며, preload="auto" 속성을 함께 사용하면 브라우저가 가능한 한 많은 데이터를 미리 가져오도록 힌트를 줄 수 있습니다. 다만 네트워크 상황과 브라우저 정책에 따라 동작이 달라질 수 있다는 점을 유의해야 합니다.