본문 바로가기
프로그래밍 놀이터/Web

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

by 돼지왕왕돼지 2013. 6. 21.
반응형


 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 를 배려하는 방식이면 될지 싶다.



반응형

댓글0