[HTML5] Video 태그에 대해 알아보자.

Video 태그에 대해 알아보자.

HTML5 가 주목받는 대표적인 이유 중 하나는 바로 이 Video 태그의 등장.

이 Video 태그가 등장하므로서 추가적인 plug-in 설치 없이도 규정된 format으로 된 video 들을 쉽게 돌릴 수 있다. 참고로 Audio 파일도 돌릴 수 있다.

우선 요 녀석 태그 속성들부터 알아보자.

Video 태그 속성들

속성	값	설명
muted	muted	소리재생에 대한 값. 현재는 muted 만 지원
autoplay	autoplay	페이지 로딩 완료 후 동영상 자동재생여부
controls	controls	play, pause 등의 control 을 표시할지 결정
height	(pixel 단위)	player 의 높이
loop	loop	동영상 반복 재생여부
poster	url	동영상 로딩에 실패할경우 나타낼 대표이미지
preload	auto metadata none	페이지 로딩시 동영상을 미리 불러올지 결정  auto : 전체 동영상 불러온다.  metadata : 메타데이터만 불러온다.  none : 부르지 않는다.
width	(pixel 단위)	player 의 너비
src	url	재생할 동영상의 url

지원포맷

포맷	MIME TYPE
MP4	video/mp4 또는 audio/mepg
WebM	video/webm
Ogg	video/ogg 또는 audio/ogg

Browser Support

출처 : W3C School Video Tag

Example Code

<video width="320" height="240" controls="controls" preload="auto" poster="images/stillcut.gif">

<source src="movie/test.mp4" type="video/mp4"/>

<source src="movie/test.webm" type="video/webm"/>

<source src="movie/test.ogv" type='video/ogg; codecs="theora, vorbis"'/>

</video>

Q : 왜 source tag 를 여러 개 써서 링크하는가?

A : 위의 Browser support 를 보면 알겠지만, 모두 YES 로 표기된 경우가 없다.

즉 유저가 어떤 브라우저를 사용하는지 알 수 없는 상황에서, 어떤 브라우저든 support 하기 위해서는

한 source loading 이 실패했을 때, 다음것을 loading 할 수 있도록 여러개를 적어 주어야 한다.

위의 예제처럼 해주면 어떤 browser 든지 로딩을 할 수 있다.

참고로 이 때 통계에 의한 browser 사용빈도를 생각하여 source 를 배치하는 것이 좋다.

통계상 인터넷 익스플로러와 크롬, 그리고 사파리가 가장 많이 차지하는 편.

그러니 MP4 를 가장 먼저 제공해주고, 그 다음 FireFox 와 Opera 를 배려하는 방식이면 될지 싶다.

attribute, Auto, autoplay, browser support, Chrome, Controls, example code, Firefox, height, html5, Internet Explorer, loop, metadata, mp4, muted, None, ogg, Opera, POSTER, preload, property, safari, Sample Code, source, source tag, src, type, url, Video, video tag, video 태그, video/mp4, video/ogg, video/webm, w3c school, webm, width, 브라우저 서포트, 비디오, 비디오 태그, 사용 빈도, 사파리, 샘플 코드, 속성, 예제 코드, 오페라, 인터넷 익스플로러, 지원 포맷, 코드, 크롬, 파이어 폴스, 파폭, audio, audio/ogg, audio/mepg