video 태그 정리

📌 video 태그 옵션 정리

 

0. loading="lazy" 

사용자가 페이지를 스크롤할 때 필요한 이미지나 iframe만 로드되도록 하여 초기 로드 시간을 단축하여 검색 엔진 최적화에 중요한 요소

<video src="video.mp4" loading="lazy"></video>

 

 

1. src: 비디오 파일의 URL을 지정합니다.

<video src="video.mp4"></video>

 

 

2. controls: 비디오 재생을 위한 기본 컨트롤(재생, 일시 정지, 볼륨 조절 등)을 표시합니다.

<video src="video.mp4" controls></video>

 

 

3. autoplay: 페이지가 로드될 때 비디오가 자동으로 재생되도록 설정합니다. 

(사용자가 소리를 듣지 못하도록 하기 위해 일반적으로 음소거와 함께 사용됩니다.)

<video src="video.mp4" autoplay></video>

 

 

4. loop: 비디오가 끝난 후 자동으로 다시 재생되도록 설정합니다.

<video src="video.mp4" loop></video>

 

 

5. muted: 비디오가 음소거 상태로 재생되도록 설정합니다.

(autoplay와 함께 사용해야 합니다.)

<video src="video.mp4" muted></video>

 

 

6. poster: 비디오가 로드되기 전에 표시할 이미지의 URL을 지정합니다. 비디오가 재생되기 전의 썸네일 역할을 합니다.

<video src="video.mp4" poster="thumbnail.jpg"></video>

 

 

7. width 및 height: 비디오의 너비와 높이를 설정합니다.

<video src="video.mp4" width="640" height="360"></video>

 

 

8. preload: 비디오의 로딩 방식을 설정합니다. 가능한 값은 none, metadata, auto입니다.

• none: 비디오를 미리 로드하지 않음.
• metadata: 비디오의 메타데이터(길이, 크기 등)만 미리 로드.
• auto: 브라우저가 비디오를 자동으로 미리 로드.

<video src="video.mp4" preload="auto"></video>