영욱닷컴(http://youngwook.com)

오랫만에 탐나는 행사가 있어서 소개해 드립니다.
요즘 가장 빛나는 단어중에 하나인 스마트를 클라우드와 함께 생각해 볼 수 있는 행사 입니다.

자세한 내용은 http://www.facebook.com/smartcloudshow?sk=app_216854508325017#!/smartcloudshow?sk=app_208205529212473 에서 참조해 주세요.. ^^

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

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

초창기 웹에서는 HTML에 기반한 하이퍼링크 문서를 전달하는 용도로 설계되었기 때문에 오디오나 비디오 콘텐츠에 대한 배려나 표준안이 존재하지 않았습니다. 결국 표준안의 부재는 플러그인 기술의 발전으로 이어졌고 오디오와 비디오 재생을 위해서 윈도우 미디어 플래이어나 혹은 ActiveX 기반의 기술을 사용하는 방법 혹은 Silverlight나 Flash와 같은 RIA 기술이 사용하기도 했습니다.

 하지만 HTML5에서는 기본적으로 이와 관련해서 이미 준비되어 있는 태그가 정의되어 있고 별도의 플러그인이 없이 재생할 수 있게 되어 있습니다.

물론 각 브라우저 마다 보여주는 룩앤필은 조금씩 다르긴 하지만 미디어 재생에 있어서 일반적으로는 그게 인터페이스가 다르지 않기 때문에 문제 될 것은 없습니다.
 그럼 오디오를 사용하기 위해서는 어떻게 해야 할까요?

사용하는 방법 자체는 아주 간단합니다.

<audio src="vincent.mp3" controls></audio>

위와 같이 한 줄이면 해결 됩니다.
 여기서 한 가지 주의 할 점이 있는데 아직 해결되지 않은 문제가 코덱에 있다는 점입니다. HTML5의 표준안에는 태그는 정의되어 있지만 코덱까지는 표준으로 정해져 있지 않다는 점입니다. 여기에는 코덱을 사용하기 위해서 라이선스를 어떻게 할 것인가 하는 근본적인 문제가 있습니다. MP3의 경우도 독일 호퍼 연구소가 라이선스를 가지고 있어서 결코 '무료'는 아니기 때문 입니다.

Browser	.mp3	.wav	.ogg
Mozzila Firefox 3.6		✓	✓
Opera 10.63		✓	✓
Google Chrome 8.0	✓	✓	✓
Apple Safari 5.0.3 (with QuickTime)	✓	✓
Microsoft IE 9	✓	✓

위의 표에서 볼 수 있다시피 FireFox나 Opera의 경우는 MP3를 지원하지 않습니다. 그 대신 오픈 라이선스 코덱인 OGG를 지원하고 있습니다. 이에 반해서 Chrome, Safari, IE9 등에서는 모두 MP3를 기본으로 설정하고 있습니다.

 물론 공통 분모로 WAV 방식을 사용할 수 있지만 압축되지 않은 데이터를 웹에서 다루는 것은 결코 좋은 방법이 아닙니다. 결국 제 생각에는 시간이 지나서 한 쪽으로 코덱이 정리되기를 기대하는 것이 지금 웹 개발자들이 할 수 있는 최선입니다. 하지만 지금 당장 어느 한쪽을 선택하라고 한 다면 저는 MP3쪽의 손을 들어주고 싶습니다.

아래표는 오디오와 관련된 태크와 함께 사용할 수 있는 속성을 정리한 표입니다.

Attribute	Value	Description
controls	*Boolean attribute	You need this to make the native audio player appear. Otherwise, you would have to use DOM to control the audio element to play your music.
autoplay	*Boolean attribute	If this guy exists, the browser will just play your song or your speech without asking permission from your visitor.
loop	*Boolean attribute	Keep repeating your music
src	url	The URL of your audio file
preload	none | metadata | auto	This attribute was formerly known as "autobuffer" and it was an boolean attribute as "controls". none - do not buffer audio file automatically. metadata - only buffer the metadata of audio file. auto - buffer audio file before it gets played.

Controls 태그는 오디오를 제어할 수 있는 컨트롤의 표시 여부를 AutoPlay는 자동 재생 그리고 Loop는 무한 반복 여부를 나타냅니다. 실제 미디어의 경로는 Src로 표시할 수 있으며 재생전에 미리 버퍼링을 시작할 것이지를 결정하는 속성이 preload 입니다.

<audio src="vincent.mp3" controls="true" loop="true" autoplay="true"></audio>

실제로 태그를 보면 정말 간단해 졌습니다. 이전의 경우에는 Object 태그를 사용해서 복잡하게 다루어야 했지만 지금의 경우는 훨씬 더 간단해 졌다는 것을 알 수 있습니다.
 한 가지 추천해 드리고 싶은 것은 아직 HTML5를 지원하는 웹 브라우저가 많지 않기 때문에 그런 브라우저에 대한 배려를 잊지 말아야 하는 다는 점입니다. 

 마지막으로 Java Script에서 오디오를 제어하고 싶을 때는

<audio id="player" src="vincent.mp3"></audio>
<div>
   <button onclick="document.getElementById('player').play()">Play</button>
   <button onclick="document.getElementById('player').pause()">Pause</button>
   <button onclick="document.getElementById('player').volume += 0.1">Vol+ </button>
    <button onclick="document.getElementById('player').volume -= 0.1">Vol- </button>
</div>

와 같이 하시면 됩니다.

김영욱 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>