Being a Developer: HTML5 Video

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...)

기본 자막 설정

자막의 경우 WebVTT 형식을 지원한다고 하는데 이에 대해서는 좀 더 정보를 알아봐야겠다.

아래 코드는 간단하게 동영상을 재생하는 코드이다.

<!DOCTYPE html>
<HTML>
    <HEAD>
        <TITLE> HTML5 Video </TITLE>
    </HEAD>
    <BODY>
        <video controls="controls">
            <source src="Friends - [1x01] - The One where Monica gets a Roommate.mkv" type="audio/mpeg" />
            Your browser does not support the video element.
        </vedeo>
    </BODY>
</HTML>

&

Original Post : http://neodreamer-dev.tistory.com/664

Being a Developer

2012/06/19

HTML5 Video

No comments :

Post a Comment

Blog Archive