preload 속성으로 비디오 사전 로딩 방지하기
HTML5 비디오가 사용자가 재생하기 전에 자동으로 로드되는 것을 방지하려면 <video> 요소의 preload 속성을 사용하고 값을 "none"으로 설정하면 됩니다.
이렇게 설정하면 웹페이지가 열릴 때 비디오 파일을 전혀 다운로드하지 않으며, 사용자가 실제로 재생 버튼을 눌렀을 때에만 데이터를 불러옵니다. 결과적으로 불필요한 네트워크 트래픽을 줄일 수 있어 페이지 초기 로딩 속도를 개선하는 데 도움이 됩니다.
다음과 같이 코드를 작성해 보세요.
<!DOCTYPE html> <html> <body> <video width = "350" height = "200" controls = "controls" preload = "none"> <source src = "movie.mp4" type = "video/mp4" /> <source src = "movie.ogg" type = "video/ogg" /> 브라우저가 video 태그를 지원하지 않습니다. </video> </body> </html>
참고: preload 속성의 주요 값
- none — 비디오를 미리 로드하지 않음 (재생 시점에만 다운로드)
- metadata — 길이, 크기 등 메타데이터만 미리 가져옴
- auto — 브라우저가 판단하여 비디오 전체 또는 일부를 미리 로드함 (기본 동작)
대용량 비디오나 여러 개의 비디오가 포함된 페이지에서는 preload="none"을 활용해 대역폭 낭비를 줄이는 것이 좋습니다.