HTML5 preload 속성이란?
HTML5에서 비디오가 재생되기 전에 미리 로딩되는 것을 막으려면 preload 속성을 사용하면 됩니다. 이 속성은 <video> 태그에 추가하며, 페이지가 열릴 때 브라우저가 비디오 파일을 어느 정도까지 미리 내려받을지에 대한 힌트를 제공합니다.
용량이 큰 영상을 포함한 페이지라면, 사용자가 실제로 재생하기 전까지 비디오를 로딩하지 않도록 설정하는 것이 초기 로딩 속도와 데이터 사용량 측면에서 매우 유용합니다.
preload 속성의 주요 값
- none: 비디오를 전혀 미리 로드하지 않습니다. 사용자가 재생 버튼을 눌러야 그 시점에 데이터를 내려받습니다.
- metadata: 비디오 길이, 크기 등 메타데이터만 미리 가져옵니다.
- auto: 브라우저가 판단하여 파일 전체 또는 일부를 미리 로드합니다(기본 동작에 해당).
실전 예제 코드
아래 코드처럼 preload="none"으로 설정하면, 비디오가 재생되기 전까지는 로딩이 발생하지 않습니다.
<!DOCTYPE html> <html> <body> <video width="350" height="200" controls preload="none"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> 브라우저가 video 태그를 지원하지 않습니다. </video> </body> </html>
위 예제에서는 MP4와 OGG 두 가지 형식의 소스를 함께 지정하여, 브라우저마다 지원하는 코덱이 다르더라도 정상적으로 재생되도록 했습니다.
참고 사항
preload 속성은 어디까지나 브라우저에 대한 '힌트'이기 때문에, 모바일 환경에서는 데이터 절약을 위해 이 속성이 무시되거나 다르게 동작할 수 있습니다. 또한 autoplay 속성과 함께 사용할 경우 preload 설정은 사실상 의미가 없어지므로 주의해야 합니다.