HTML5 Video

2012. 6. 19. 01:08

HTML5에 Multimedia를 위해 Video element가 추가 되었다. video 태그를 이용하여 쉽게 웹페이지에서 동영상을 보여 줄 수 있다.

보여줄 수 있는 코덱은 MPEG4, WebM, Ogg 가 있다. Audio 와 마찬가지로 표준이 없다. 브라우저마다 지원하는 코덱이 서로 달라서 하나의 포맷으로 모든 브라우저을 대응할 수 없다. Mpeg4와 Ogg정도 구성을 해야 대부분의 브라우저를 대응할 수 있다.

video 태그 속성

autoplay
value - autoplay
페이지 로딩을 마치고 동영상을 자동으로 재생할 지 여부를 설정한다. "autoplay"를 설정할 경우 동영상을 자동재생한다.
controls
value - controls
동영상 재생을 제어할 제어 컨트롤을 보여줄지를 설정한다. "controls"로 설정한 경우 화면에 재생 트랙과 Volume 을 조정할 수 있는 컨트롤을 보여준다.
height
value - pixels
video player 높이를 설정. 실제 영상의 비율은 유지되며 재생한다.
width
value - pixels
video player 폭을 설정. 실제 영상의 비율은 유지되며 재생한다.
loop
value - loop
반복 여부를 설정한다. "loop" 설정시 재생 완료 후 반복해서 재생한다.
muted
value - muted
동영상 재생시 소리 재생 여부를 설정한다. "muted"를 설정한 경우 소리는 재생되지 않는다.
poster
value - URL
동영상을 불러오는 동안에 표시하는 이미지 이다. 미리 읽기가 끝나 재생이 시작되거나 사용자가 클릭한 경우 poster 이미지는 사라진다.
preload
value - auto, metadata, none
동영상 데이터의 미리읽기를 할지 여부를 설정한다. "auto"로 설정한 경우 페이지 로딩이 끝나고 동영상 데이티를 읽어 들인다.
src
value - URL
재생할 동영상 주소를 설정한다.

video 태그는 아래 source와 track element를 포함할 수 있다.
source는 재생하고자 하는 동영상의 정보를 담고 있으며 아래 와 같은 속성을 포함 한다.
source tag 속성

media
value - media_query
Audio 리소스의 type 대한 정의라 하는데 거의 사용이 되지 않는 듯 하다.
src
value - URL
재생하고자 하는 파일의 경로를 지정한다.
type
value - MIME_type (video/mp4, video/ogg, video/webm)
재생하고자 하는 파일의 형식을 지정한다.
video/mp4 : MPEG 4 (H264 video + AAC audio codec)
video/ogg : Ogg (Theora video + Vorbis audio codec)
video/webm : WebM (VP8 video codec + Vorbis audio codec)

track은 자막에 대한 설정을 아래와 같은 속정을 포함 한다.

default
value - default
기본 자막 설정
kind
value - captions, chapters, descriptions, metadata, subtitle
자막 종류 설정
label
value - text
기본 자막 설정
src
value - URL
기본 자막 설정
srclang
value - language_code (en, ko...)
기본 자막 설정