2011.09.01 12:30

4. HTML5 Video

HTML5 2011.09.01 12:30


비디오와 관련된 태그도 오디오만큼이 사용하기 쉽습니다. 하지만 오디오와 마찬가지로 코덱이라는 문제는 여전히 가지고 있습니다.

<video src="rain.mp4" controls width="480" height="360"></video>

비디오와 관련해서는 추가적으로 넓이, 높이와 같은 추가적인 속성을 가지고 있습니다. 그런데 이렇게 쓰고나면 정말 이것으로 충분한가를 물어볼 분들이 많을 것 같습니다만 사실 이것이 다 입니다. HTML5는 요란하고 많은 사람들이 그 안에서 새로운 가능성을 찾아가고 있습니다만 사실 그 자체만 보면 그리 없지 않을 뿐만 아니라 상당히 쉬운 기술입니다.

 하지만 앞서 이야기 한 바와 같이 코덱과 라이선스라는 문제는 아직 여전히 남아 있습니다.

Browser H.264+
AAC+
MP4
WebM Theora
+Vorbis
+Ogg
Mozzila Firefox 3.6
Opera 10.63
Google Chrome 8.0
Apple Safari 5.0.3 (with QuickTime)
Microsoft IE 9 Beta


지금 현재 인터넷에서 비디오 파일을 만들 때 가장 많이 사용되고 있는 코덱이라면 H.264를 영상 코덱으로 하고 AAC를 음향 코덱으로 하는 확장자가 MP4인 파일입니다. 하지만 역시나 H.264 코덱의 경우도 상용 라이선스를 가지고 있는 코덱이기 때문에 FireFox, Opera에서는 현재 지원 하지 않고 있습니다.  
 WebM의 경우는 로열티 비용이 없는 개방형 고화질 영상 압축 포멧을 목표 구글의 후원을 받아 개발되고 잇습니다. 2010년 5월 19일 발표되었는데 주로 HTML5의 영상 포멧으로 많이 활용되고 있습니다. 현재로는 가장 많은 콘텐츠가 H.264로 되어 있지만 WebM을 지원하는 브라우저가 제일 많기 때문에 앞으로 시장 상황은 어떻게 진행될지 모르겠습니다.

비디오와 관련된 속성은 아래와 같습니다.
Attribute Value Description
controls *Boolean attribute If you want the browser native player control to be around, specifiy "controls"
autoplay *Boolean attribute If this guy exists, the browser will just play your video without asking permission from visitor
loop *Boolean attribute Keep repeating your video
src url The URL of your video file
preload none | metadata | auto This attribute was formerly known as "autobuffer" and it was an boolean attribute as "controls".

none - do not buffer video file automatically.
metadata - only buffer the metadata of video
auto - buffer video file before it gets played.
width width in pixels Width of video player
height height in pixels Height of video player
poster url of a image file If present, shows the poster image until the first frame of video has downloaded.

대부분의 속성은 오디오 태그와 동일한데 다른 점은 width, height, poster 입니다.
이 중에서 poster 속성은 비디오 파일이 로딩되기 전에 출력해주는 이미지 파일의 경로를 지정하는 속성으로 가급적이면 웹에서는 설정해 주는게 사용자들에게 좋은 접근이 될 것 같습니다.

김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


HTML5 강좌 전체 목록
  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. Web form 2.0
    Input Attr: Placeholder
    Input Attr: Autofocus
    Input Attr: Required field
    Input Attr: DataList
    Input Type: Search
    Input Type: Email, URL, Phone
    Input Type: Range
    Input Type: Number
    Input Type: Date
    Input Type: Color
  7. Towards Semantic Web
    Semantic <mark>
    Semantic <time>
    Semantic <meter>
    Semantic <progress>
    Semantic <section>
    Semantic <header>
    Semantic <footer>
    Semantic <nav>
    Semantic <article>
    Semantic <aside>
저작자 표시 변경 금지
신고