아꿈사 HTML5

1. HTML5 CSS3
7. 오디오와 비디오
아키텍트를 꿈꾸는 사람들 cafe.naver.com/architect1
현수명 soomong.net
#soomong

2. <audio>
<video>

3. 역사!
지금 어디에 있는지 알려면
전에 어디에 있었는지 알아야 하니까요

4. <embed src="bass.mp3" autostart="true"
loop="true" controller="true"></embed>

5. <object>
<param name="src" value="bass.mp3">
<param name="autoplay" value="false">
<param name="controller" value="true">
<embed src="bass.mp3" autostart="true"
loop="true" controller="true"></embed>
</object>

6. Flash 넘 느림

8. 직접 지원하자.

9. 컨테이너와 코덱
Video Codec Audio Codec
- H.264 - AAC
- Theora - MP3
- VP8 - OGG

10. H.264
from MPEG 그룹
로열티 콘텐츠 제작자가 코덱을 쓰면
돈내야 함!!
와 이 지원하는 사실상의 표준

11. 테오라 Theora
from Xiph.Org 재단
로열티 공짜
와 에서 잠수함 특허 걱정.
잠수함 특허?
특허권자가 고의로 특허 발표 일을 연기하면서
널리 퍼질 때까지 기다리는 것. 즉 꼼수.

12. VP8
from
로열티 공짜
H.264와 비슷한 수준
but 지원안함

14. AAC (Advanced Audio Coding)
from
로열티 돈내야함!
제품은 당연히 다 지원.

15. Vorbis (OGG)
from 오픈 소스
로열티 공짜
매우 높은 품질.
H/W 기기에서는 잘 지원 안함
음질?
한때 OGG음원 찾아서 듣곤 했지만 막귀로는 비교불가

16. MP3
from MPEG 그룹
로열티 특허 문제!

17. 컨테이너?
Metadata 파일
오디오와 비디오 파일을 담는 봉투
자신이 포함하고 있는 파일의 인코드 정보는 없음
OGG 컨테이너 : 테오라 Video + OGG Audio
O ( FireFox & Chrome & Opera )
MP4 컨테이너 : H.264 Video + AAC Audio
O ( Safari & Chrome & Flash & iPhone & iPad )
WebM 컨테이너 : VP8 Video + OGG Audio
O ( FireFox & Chrome & Opera & Flash)
구글+모질라
VP8 + WebM을 밀고 있음.

19. http://en.wikipedia.org/wiki/Comparison_of_container_formats

20. <audio>
<article class="sample">
<header><h2>Drums</h2></header>
<audio id="drums" controls>
<source src="sounds/ogg/drums.ogg" type="audio/ogg">
<source src="sounds/mp3/drums.mp3" type="audio/mpeg">
<a href="sounds/mp3/drums.mp3">Download drums.mp3</a>
</audio>
</article>
src를 여러 개 정의
지원하지 않으면 내려받기 링크 제공

22. 지원하지 않을때는
내려받을 링크를
audio 요소밖으로 빼고
JavaScript로 링크 숨기기

23. <article class="sample">
<header><h2>Drums</h2></header>
<audio id="drums" controls>
<source src="sounds/ogg/drums.ogg" type="audio/ogg">
<source src="sounds/mp3/drums.mp3" type="audio/mpeg">
</audio>
<a href="sounds/mp3/drums.mp3">Download drums.mp3</a>
</article>
링크를 audio 요소밖으로 빼고 JavaScript로 링크 숨기기
$(function(){
var canPlayAudioFiles = !!(document.createElement('audio').canPlayType);
if(canPlayAudioFiles){
$(".sample a").hide();
};

24. <video>
<article>
<header>
<h2>Saturate with Blur</h2>
</header>
<video controls>
<source src="video/h264/01_blur.mp4">
<source src="video/theora/01_blur.ogv">
<source src="video/webm/01_blur.webm">
<p>이 브라우저는 video를 지원할 그럴 분이 아닙니다.</p>
</video>
</article>
브라우저가 모를수도 있음
서버에 있는 파일이니 .htaccess 에 친절히 Mime type을 정의해준다.
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

26. 지원하지 않을때는
플래시로!
<object width="640" height="480" type="application/x-shockwave-flash"
data="swf/flowplayer-3.2.2.swf">
<param name="movie" value="swf/flowplayer-3.2.2.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars"
value='config={"clip":{"url":"../video/h264/01_blur.mp4",
"autoPlay":false,
"autoBuffering":true
}
}' />
<img src="video/thumbs/01_blur.png"
width="640" height="264" alt="Poster Image"
title="No video playback capabilities." />
</object>

27. 플래시의 보안정책
사용한 비디오와
플레이어 모두
서버에 있어야 함

28. HTML5 Video의 한계
Streaming X
콘텐츠 권리 보호 X
인코딩 따로 해줘야함

29. 그분이 가시는 곳에
길이 만들어 지리라.
성인업계!!
전자상거래의 시작부터 플래시의 비약까지
인터넷에 강력한 영향을 끼치고 있음.
그런 분께서 플래시를 버리고
H.264로 인코딩한 HTML5 비디오를 서비스하고 있음!

30. 장애인을 위한 자막 서비스
<section class="transcript">
<h2>Transcript</h2>
<p>We'll drag the existing layer to the new button on the bottom of
the Layers palette to create a new copy.</p>
<p>Next we'll go to the Filter menu and choose "Gaussian Blur".
We'll change the blur amount just enough so that we lose a little
bit of the detail of the image.</p>
<p>Now we'll double-click on the layer to edit the layer and
change the blending mode to "Overlay". We can then adjust the
amount of the effect by changing the opacity slider.</p>
<p>Now we have a slightly enhanced image.</p>
</section>

32. HTML5 video + canvas
http://craftymind.com/factory/html5video/CanvasVideo.html
http://craftymind.com/factory/html5video/CanvasVideo3D.html

33. Reference
http://www.watblog.com/2010/04/30/steve-jobs-thoughts-on-adobe-flash-%E2%80%93-it-is-past-and-dead/
http://www.klickout.com/html5/iphone-ipad-android-mobile-apps-with-html5-and-css3-best-html5-mobile-framework-list/
http://noteandpoint.com/2010/04/html5-wtf/
http://en.wikipedia.org/wiki/HTML5_video
감사합니다