HTML5 - 비디오 태그

Video 태그

윈도우에 기본으로 내장 되어 있는 동영상 파일은 WMV 형식인데 웹 브라우저는 WMV 형식을 지원하지 않습니다. 따라서 MP4(H.264+ACC) 형식과 WebM(VP80+Vorbis) 형식을 사용합니다. video 태그를 생성할 때는 아래의 표의 속성을 사용합니다.

속성 이름	설명
src	비디오 파일 경로 지정
poster	비디오 준비 중일 때의 이미지 파일 경로 지정
preload	비디오를 재생하기 전에 모두 불러올지 지정
autoplay	비디오를 자동 재생할지 지정
loop	비디오를 반복할지 지정
controls	비디오 재생 도구를 출력할지 지정
width	비디오 너비 지정
height	비디오 높이 지정

video 태그도 audio 태그 처럼 웹 브라우저마다 지원하는 비디오 형식이 다르므로 source 태그를 사용해야 합니다. 2019년 1월 기준으로 각 웹 브라우저에서 지원하는 비디오 형식은 아래와 같습니다.

	인터넷 익스프롤러	크롬	파이어폭스	사파리	오페라
MP4	O	O	O	O	O
WebM	X	O	O	X	O
OGV	X	O	O	X	O

기본적으로 MP4 형식을 사용하면 됩니다. 만약 라이선스 문제 또는 기타 웹 브라우저에서 문제가 발생한다면, 아래 예시1과 같이 source 태그를 생성하고 각각의 속성을 입력하면 됩니다.

 

예시1

poster 속성은 유튜브등의 썸네일(Thumbnail)과 비슷한 기능을 하는 속성입니다. 동영상이 대기 상태일 때 표시할 이미지를 의미합니다. 아래 예시2는 poster 속성을 이용해서 만들었습니다.

 

예시2

 

iframe을 이용한 유튜브 동영상 업로드는 <iframe>으로 시작하고 <iframe> 안에 속성값을 입력해줍니다. 예를 들어 <iframe width="값" height="값" src="https://www.youtube.com/embed/동영상의 고유 아이디"></iframe>으로 입력해주시면 위의 동영상 처럼 올릴 수 있습니다.