Frontend
Video 태그 속성에 대하여
Dddu
2025. 3. 16. 08:26
비디오 태그를 사용할 때 여러가지 속성을 넣을 수 있는데, 그 속성은 다음과 같다.
muted : 음소거 상태
autoplay : 자동재생 (muted와 함께 넣어야 동작한다.)
poster : 썸네일 이미지
preload : 영상을 먼저 다운을 받을지 말지를 선택가능합니다 (auto, metadata, none 사용가능)
controls : 재생, 정지 등 조작 메뉴를 보여준다.
loop : 동영상을 반복 재생한다.
poster : 동영상 재생 전에 보여줄 이미지
preload : 페이지를 열 때 무엇을 로드할지 정한다.
auto : 동영상, 메타데이타 모두 로드한다.
metadata : 메타데이타만 로드한다.
none : 로드하지 않는다.
source
-src : 동영상 위치를 입력한다. 웹브라우저가 가장 많이 지원하는 형식은 MP4이다.
-type : 동영상 타입을 알려준다. 만약 MP4 파일이라면 video/mp4라고 적는다.
video 태그를 사용할 때 상충되거나 혼자서는 작동하지 않는 속성이 있다. 예를 들어 autoplay로 정하면 preload는 무시된다. 크롬 등 일부 웹브라우저에서는 muted와 autoplay를 같이 사용해야 자동 시작이 작동한다.
이러한 속성을 넣은 video 태그를 사용하려면 아래와 같이 사용하면 된다.
<video autoplay muted loop poster="썸네일경로" preload="metadata">
<source src="비디오파일경로">
</video>