📹 <video> 태그 속성 설명:
<video controls autoplay muted loop src="./mixkit.mp4"></video>| 속성 | 설명 |
|---|---|
controls | ✅ 기본적인 재생 조작 UI (재생, 일시정지, 볼륨, 전체화면 등)을 브라우저에서 제공해줘요. 사용자가 조작할 수 있게 해줍니다. |
autoplay | ✅ 페이지가 로드되자마자 자동 재생되도록 해요. 다만, **muted(음소거)**가 함께 있어야 대부분의 브라우저에서 허용돼요 (무음 자동재생 허용 정책 때문). |
muted | ✅ 소리를 꺼놓은 상태로 시작합니다. 보통 autoplay와 함께 씁니다. 화면을 누르면 소리가 켜지는 건 아니고, 사용자가 직접 컨트롤 바에서 음량을 조절해야 해요. |
loop | ✅ 재생이 끝나면 자동으로 처음부터 다시 반복 재생됩니다. 백그라운드 영상에서 자주 쓰이는 속성이에요. |
🔍 참고 예시:
<video
src="./mixkit.mp4"
autoplay
muted
loop
playsinline
controls
></video>👉 추가 팁:
playsinline을 추가하면 모바일에서 전체화면으로 전환되지 않고, 페이지 안에서 재생됩니다. 백그라운드 영상에 자주 필요함.- iOS 사파리에서는
autoplay가 잘 안 되는 경우가 있어muted와playsinline을 함께 써주는 게 좋다.
코린이🌱 / 개인적인 공부기록 공간입니다, 제로베이스부트캠프 수강중...😄