video 태그 정리

• 속성 : Global, Event
• 요소 : block
• 닫는 태그 : 닫는 태그 사용
• 호환성 : ie6~8은 사용 안됨

See the Pen video progressbar & play, pause button by won (@won5129) on CodePen.

 

autoplay

boolean 속성. 이 값이 설정되면, 데이터 로딩이 완료되지 않더라도 재생 가능한 시점에 자동으로 재생이 시작

 

buffered

미디어의 어느 시간대가 버퍼에 들어 있는지 확인할 수 있는 속성

 

controls

이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공

 

loop

boolean 속성, 이 값이 설정되면, 동영상 재생이 마친 후(동영상의 마지막에 도달하면) 자동으로 처음으로 돌아감

 

muted

비디오에 포함되어 있는 오디오의 기본 설정을 나타내는 boolean 속성. 설정하면 오디오가 나오지 않는다. 기본 값은 false이며 이는 비디오가 재생되면 오디오도 같이 재생됨을 의미

 

poster

사용자가 동영상을 재생하거나 탐색하기 전까지 출력되는 포스터 프레임 주소

 

파일포맷

• mp4 : 제일많이 사용되는 비디오 포맷
• avi : 마이크로소프트 포맷
• ogg : 테오라,보비스 공개 포맷
• webm : 구글 공개 포맷

호환성

• 크롬 : mp4, webM, ogg
• 파이어폭스 : webM, ogg(2021년 5월 현재 파폭도 mp4 파일이 재생되는 것을 확인)
• 사파리 : mp4
• 오페라 : webM, ogg
• 익스플로러 : mp4

기타사항

외부동영상이나 플러그인을 불러올 때는 <embed> 또는 <iframes>를 사용

<source> tag 를 사용하여 비디오를 불러온다

<video src="video/main.mp4" poster="img/sample.png" autoplay controls loop>
	<source src="video/main.ogv" type="video/ogv">
	<source src="video/main.mp4" type="video/webm">
</video>

 

기타 팁

video 태그를 사용할때 자동재생을 원한다면 필수 속성 3가지를 꼭 써줘야함

• autoplay
• muted
• playsinline

pc, 안드로이드는 autoplay, muted 속성만 추가해도 자동재생 가능

아이폰은 playsinline 속성을 추가해줘야 자동재생이 된다.