HTML 비디오 반복 로딩 방지하기
같은 페이지에서 HTML5 비디오가 반복적으로 다시 로드되는 현상을 막으려면 <video> 태그에 preload="auto" 속성을 사용하면 됩니다. 이 속성을 지정하면 브라우저가 페이지를 열 때 비디오를 미리 버퍼링해 두기 때문에 재생 시마다 파일을 새로 내려받는 낭비를 줄일 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<body>
<video width = "350" height = "200" controls = "controls" preload = "auto">
<source src = "movie.mp4" type = "video/mp4" />
<source src = "movie.ogg" type = "video/ogg" />
사용 중인 브라우저는 video 태그를 지원하지 않습니다.
</video>
</body>
</html>위 코드에서는 movie.mp4와 movie.ogg 두 가지 형식의 소스를 제공하여 다양한 브라우저에서 호환성을 확보했습니다. 브라우저는 자신이 지원하는 첫 번째 소스를 선택해 재생합니다.
preload 속성의 주요 값
- auto — 페이지가 로드될 때 비디오 전체(또는 충분한 양)를 미리 불러옵니다. 반복 로딩을 방지하는 데 가장 적합합니다.
- metadata — 재생 시간, 크기 등 메타데이터만 미리 가져옵니다.
- none — 아무것도 미리 로드하지 않으며, 사용자가 재생을 시작할 때 데이터를 받아옵니다.
단, auto 값을 사용하면 방문자가 의도하지 않아도 트래픽이 발생할 수 있으므로, 용량이 큰 영상이나 모바일 환경에서는 상황에 맞게 값을 조절하는 것이 좋습니다.