HTML5 & CSS3 - Video,Audio

1,906 views

Published on

아꿈사 HTML5

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,906
On SlideShare
0
From Embeds
0
Number of Embeds
257
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

HTML5 & CSS3 - Video,Audio

  1. 1. HTML5 CSS3 7. 오디오와 비디오 아키텍트를 꿈꾸는 사람들 cafe.naver.com/architect1 현수명 soomong.net #soomong
  2. 2. <audio><video>
  3. 3. 역사!지금 어디에 있는지 알려면전에 어디에 있었는지 알아야 하니까요
  4. 4. <embed src="bass.mp3" autostart="true" loop="true" controller="true"></embed>
  5. 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. 6. Flash 넘 느림
  7. 7. 직접 지원하자.
  8. 8. 컨테이너와 코덱Video Codec Audio Codec - H.264 - AAC - Theora - MP3 - VP8 - OGG
  9. 9. H.264 from MPEG 그룹 로열티 콘텐츠 제작자가 코덱을 쓰면 돈내야 함!! 와 이 지원하는 사실상의 표준
  10. 10. 테오라 Theora from Xiph.Org 재단 로열티 공짜 와 에서 잠수함 특허 걱정. 잠수함 특허? 특허권자가 고의로 특허 발표 일을 연기하면서 널리 퍼질 때까지 기다리는 것. 즉 꼼수.
  11. 11. VP8 from 로열티 공짜 H.264와 비슷한 수준 but 지원안함
  12. 12. AAC (Advanced Audio Coding) from 로열티 돈내야함! 제품은 당연히 다 지원.
  13. 13. Vorbis (OGG) from 오픈 소스 로열티 공짜 매우 높은 품질. H/W 기기에서는 잘 지원 안함 음질? 한때 OGG음원 찾아서 듣곤 했지만 막귀로는 비교불가
  14. 14. MP3 from MPEG 그룹 로열티 특허 문제!
  15. 15. 컨테이너?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을 밀고 있음.
  16. 16. http://en.wikipedia.org/wiki/Comparison_of_container_formats
  17. 17. <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를 여러 개 정의 지원하지 않으면 내려받기 링크 제공
  18. 18. 지원하지 않을때는 내려받을 링크를 audio 요소밖으로 빼고 JavaScript로 링크 숨기기
  19. 19. <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(); };
  20. 20. <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
  21. 21. 지원하지 않을때는 플래시로!<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>
  22. 22. 플래시의 보안정책사용한 비디오와플레이어 모두서버에 있어야 함
  23. 23. HTML5 Video의 한계Streaming X콘텐츠 권리 보호 X인코딩 따로 해줘야함
  24. 24. 그분이 가시는 곳에길이 만들어 지리라. 성인업계!! 전자상거래의 시작부터 플래시의 비약까지 인터넷에 강력한 영향을 끼치고 있음. 그런 분께서 플래시를 버리고 H.264로 인코딩한 HTML5 비디오를 서비스하고 있음!
  25. 25. 장애인을 위한 자막 서비스<section class="transcript"> <h2>Transcript</h2> <p>Well drag the existing layer to the new button on the bottom of the Layers palette to create a new copy.</p> <p>Next well go to the Filter menu and choose "Gaussian Blur". Well change the blur amount just enough so that we lose a little bit of the detail of the image.</p> <p>Now well 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>
  26. 26. HTML5 video + canvas http://craftymind.com/factory/html5video/CanvasVideo.html http://craftymind.com/factory/html5video/CanvasVideo3D.html
  27. 27. Referencehttp://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 감사합니다

×