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을 밀고 있음.
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를 여러 개 정의
지원하지 않으면 내려받기 링크 제공
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>
31.
32. HTML5 video + canvas
http://craftymind.com/factory/html5video/CanvasVideo.html
http://craftymind.com/factory/html5video/CanvasVideo3D.html