Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5 video

13,254 views

Published on

동영상과 웹표준(HTML5 video)
웹어워드 2011 웹표준 & HTML5 전략 세미나 발표자료: http://goo.gl/vI1H2

Published in: Technology

Html5 video

  1. 1. 웹어워드2011 웹표준& HTML5 전략 세미나<br />동영상 서비스와 웹표준<br />HTML5 <video><br />2011.5.24<br />민형기<br />CJ E&M Music.Live기술개발실<br />
  2. 2. 목 차<br />1. 동영상 서비스 환경변화<br />2. 동영상 서비스 문제<br />3. 동영상 서비스 기술<br /> - Plugin based Video<br /> - Flash video<br /> - HTML5 video<br />- HTML5 video Demo<br />- HTML5 video 문제점<br /> - 해결책은?<br />
  3. 3. 동영상 서비스 환경변화<br />
  4. 4. 동영상 서비스 환경변화 - 1996~ vs. 2010~<br />
  5. 5. 동영상 서비스 환경변화 – Browser Wars<br />http://health20.kr/1648<br />
  6. 6. 동영상 서비스 환경변화 - Devices<br />
  7. 7. 동영상 서비스 환경변화 – Devices (PC vs. SmartPhone) <br />
  8. 8. 동영상 서비스 환경변화 – 영상서비스의 중요성<br />
  9. 9. 동영상 서비스 환경변화 - 클라우드 컴퓨팅<br />
  10. 10. 동영상 서비스 환경변화 – N Screen<br />
  11. 11. 동영상 서비스 문제<br />
  12. 12. 동영상 서비스 문제 – 수많은 Devices<br />
  13. 13. 동영상 서비스 문제 – 다양한 멀티미디어 표준<br />Multimedia Coding on the web is fragmented<br />Many video codecs:<br />DIVX, XVID, H264<br />WMV, VC-1, VP8<br />Many Containers (File Format):<br />AVI, MKV<br />MP4, FLV<br />Many delivery methods<br />RTSP/RTP Streaming, Progressive download<br />Live Http Streaming, Smooth Streaming<br />
  14. 14. 동영상 서비스 문제 – 많은 비용<br />
  15. 15. 동영상 서비스 문제 – 해결책은?<br />웹 표준기술 사용<br />코덱 표준화<br />컨테이너 표준화<br />비트레이트 표준화<br />프로파일 표준화<br />전송규격 표준화<br />
  16. 16. 온라인 동영상 서비스 기술<br />Plugin Based Video<br />Flash Video<br />HTML5 Video<br />
  17. 17. Plugin Based Video<br />
  18. 18. Plugin Based Video 문제<br />OS와 브라우저에 조합에 따른 복잡한 Video 지원문제<br />예) Mac의 FF에서 wmv<br />다양한 코덱이 필요<br />예) wmv, mov, rm등<br />Plugin기술을 사용하여 사용자 설치문제 발생 (ActiveX 등)<br />
  19. 19. Flash Video<br />
  20. 20. Flash Video 역사<br />2002, Flash Video 출시 – Sorenson spark codec 지원<br />2003, FLV format 지원 – VP6 codec 지원<br />2005, youtube.com에서 Flash FLV format 사용<br />2006, H.264 codec 지원<br />
  21. 21. Flash Video - Market 현황<br />SmartPhone<br />Desktop<br />http://www.adobe.com/products/player_census/flashplayer/<br />http://www.adobe.com/products/player_census/flashplayer/mobile_penetration.html<br />
  22. 22. Flash Video – Code Example<br /><object width="425" height="344"><br /> <param name="movie“<br /> value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en &fs=1&"><br /> </param><br /> <param name="allowFullScreen“ value="true"></param><br /> <param name="allowscriptaccess“ value="always"></param><br /> <embed src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&fs=1&" type="application/x-shockwave-flash“ allowscriptaccess="always" allowfullscreen="true“ width="425" height="344"></embed><br /></object><br />
  23. 23. Flash Video - Flash 문제<br />
  24. 24. Flash Video – Thoughts on Flash<br />http://www.apple.com/hotnews/thoughts-on-flash/<br />
  25. 25. HTML5 <video><br />
  26. 26. HTML5 <video><br />HTML5에 정의된 미디어 태그 (<audio>, <video>)<br />플러그인 설치 없이 브라우저에서 동영상 지원<br />하나의 태그로 다양한 video 유형을 지원<br />JavaScript나 ActionScript가 필요 없음<br />Powerful (simple) API<br />HTML5 <video>지원:<br />
  27. 27. HTML5 <video> - Example<br />브라우저 내장 컨트롤 사용<br /><video width="480" height="380“ controls><br /> <source src="http://www.archive.org/{...}_512kb.mp4"<br />type="video/mp4"></source><br /> <source src="http://www.archive.org/{...}nsters.ogv"<br />type="video/ogg"></source><br /> <p>Your browser doesn't like HTML5 video, <br /> watch the movie on <br /> <a ref="http://www.archive.org/{...}_monsters"><br /> archive.org</a>.<br /> </p><br /></video><br />
  28. 28. Controlling <video> with JavaScript<br />var v = document.getElementById('player');<br />v.play();<br />v.pause();<br />v.volume = ... ;<br />v.currentTime = ... ;<br />...<br />
  29. 29. <video>methods & attributes<br />var video = $('video').get(0);<br />video.play ();<br />video.pause();<br />video.paused; // Returns true if video is paused.<br />video.ended; // Returns true if video is over.<br />video.volume; // Returns volume value ( between 0-1 )<br />video.volume=0.5; // Sets volume value ( between 0-1 )<br />video.currentTime; // Current point of time in the video.<br />video.length; // Returns the length in seconds.<br />video.seekable; // Returns true if supports seeking.<br />video.playbackRate; // Allows you to rewind/fastforward.<br />
  30. 30. 주요 속성 및 주요 함수<br />src: 멀티미디어 파일 소스 지정<br />currentTime: 현재 재생 위치를 초 단위로 반환<br />duration: 전체 재생시간을 초 단위로 반환<br />paused: 일시정지 여부 반환<br />ended: 재생 종료 어부 반환<br />muted: 음소거 여부 반환<br />volume: 볼륨 값(0.0 ~ 1.0 범위를 가짐)<br />error: 에러 정보를 반환<br />networkState: 멀티미디어 파일과 관련된 네트워크 상태 반환(접속전, 로딩 중, 완료, 로딩 실패 등)<br />주요 함수<br />load(): 멀티미디어를 읽어 들임(재생하지는 않음)<br />play(): 멀티미디어를 재생함<br />pause(): 일시 정지<br />
  31. 31. Events fired by <video><br />var v = document.getElementById('player');<br />v.addEventListener('loadeddata', function() { ... }, true)<br />v.addEventListener('play', function() { ... }, true)<br />v.addEventListener('pause', function() { ... }, true)<br />v.addEventListener('timeupdate', function() { ... }, true)<br />v.addEventListener('ended', function() { ... }, true)<br />...<br />
  32. 32. 주요 이벤트<br />play: 재생될 때 발생<br />progress: 멀티미디어 파일을 로딩중에 지속적(그리고 간헐적) 발생<br />timeupdate: 재생 중에 지속적 발생<br />ended: 재생 종료시발생<br />error: 멀티미디어 로딩, 재생과 관련한 에러가 있을 시 발생<br />
  33. 33. HTML5 Video Demo<br />
  34. 34. Demo - Video with external controls<br />http://people.opera.com/patrickl/experiments/webm/basic-controls/<br />
  35. 35. 내장 <video> UI 컨트롤<br />OPERA<br />SAFARI<br />FIREFOX<br />CHROME<br />IE9<br />
  36. 36. Demo - Fancy video controls with Javascript<br />http://people.opera.com/patrickl/experiments/webm/fancy-controls/<br />
  37. 37. Demo - Fancy video swap<br />http://people.opera.com/patrickl/experiments/webm/fancy-swap/<br />
  38. 38. Demo - HTML5 Video Events and API<br />http://www.w3.org/2010/05/video/mediaevents.html<br />
  39. 39. Demo - Transforming HTML5 video with CSS3<br />http://isithackday.com/mit/transforming-video.html<br />
  40. 40. Dynamic Content Injection<br />http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml<br />
  41. 41. Canvas Video<br />http://craftymind.com/factory/html5video/CanvasVideo.html<br />
  42. 42. HTML5 Video 문제점<br />
  43. 43. HTML5 Video 문제점<br />브라우저 마다 다른 코덱정책(Codec fragment)<br />제한된 스트리밍 프로토콜 지원(Progressive Download)<br />컨텐츠 보안 문제 (Contents Protection)<br />캡슐화 + 삽입(Encapsulation + Embedding)<br />전체화면 지원(Fullscreen Video)<br />카메라 + 마이크 제어<br />라이브 스트리밍 지원<br />컨텐츠스트림 제어 / 스트림관련 부가정보 제공<br />광고와 관련된 Ecosystem (광고관련정보 리포팅, 분석)<br />스펙이 보완중임 (~2015)<br />
  44. 44. Codec/Container – MP4/H.264<br />9.0<br />ubiquitous, patent encumbered, licensing/royalties<br />http://caniuse.com/#search=video<br />
  45. 45. Codec/Container – OggTheora<br />“free and open”, no licensing/royalties<br />not many tools for it, not web optimised<br />
  46. 46. Codec/Container – WebM/VP8<br />open and royalty-free, web optimised<br />
  47. 47. 해결책은?<br />
  48. 48. 하나의 파일로 재생할 순 없을까?<br />H.264 via HTML5 with a fallback<br />to Flash or Silverlight (playing the<br />same file) if the browser cannot<br />play H.264 natively via <video>.<br />
  49. 49. HTML5 video + Flash video<br /><video controls autoplay poster="..." width="..." height="..."><br /> <source src="movie.mp4" type="video/mp4" /><br /> <source src="movie.webm" type="video/webm" /><br /> <source src="movie.ogv" type="video/ogg" /><br /> <object width="..." height="..." <br /> type="application/x-shockwave-flash" data="player.swf"><br /> <param name="movie" value="player.swf" /><br /> <param name="flashvars" value=" ... file=movie.mp4" /><br /> <!-- fallback content --><br /> </object><br /></video><br />
  50. 50. CSS styled video controls – MediaElementJS.com<br />http://mediaelementjs.com/<br />
  51. 51. JavaScript <video> libraries<br />http://videojs.com<br />http://projekktor.com<br />http://jwplayer.com<br />http://jilion.com/sublime/video<br />http://mediaelementjs.com<br />http://jplayer.org/<br />http://sublimevideo.net/<br />
  52. 52. Chrome Frame<br />Minimal effort for bringing IE6, 7 and 8 up to the latest HTML5 technologies<br />Two ways to get your websites ready for Chrome Frame:<br />Client side:<br />Server side:<br /><meta http-equiv="X-UA-Compatible” content="chrome=1"><br />X-UA-Compatible: chrome=1<br />http://www.chromium.org/developers/how-tos/chrome-frame-getting-started<br />
  53. 53. 스트리밍 프로토콜<br />
  54. 54. Streaming Protocol – Progressive Download<br />- Video Delivery 방법으로 가장 폭넓게 사용됨<br />- 적용하기가 제일 쉬움<br />- Flash와 HTML5 audio, video, iOS, Android에서 지원함<br />- 전송트래픽이 많이 발생함<br />- 큰 파일에는 적합하지 않음(작은 클립에 맞음)<br />- 라이브 스트리밍은 지원하지 않음<br />
  55. 55. Streaming Protocol – RTMP/RTSP Streaming<br />- RTMP<br /> +Flash의 Streaming Protocol, FMS, Wowza, 대부분의 CDN에서 제공함<br /> +Bandwith efficiency, Quality switching<br />- RTSP: Android에서 지원함<br />- 비싼 유지비용<br />- 전용서버, 전용프로토콜(rtsp/554, rtmp/1935, rtmpt/80)<br />- 방화벽 문제 발생가능 (사내 방화벽 정책에 따라 막힐 수 있음)<br />- 대용량 파일, 라이브 지원가능<br />
  56. 56. Streaming Protocol – Adaptive HTTP Streaming<br />- HTTP Dynamic Streaming : Flash<br />- Http Live Streaming: iOS, Android 3.0<br />- Smooth Streaming: Silverlight, IIS Media Service Extension<br />- DASH(Dynamic Adaptive Streaming over HTTP): MPEG 표준화 협회- RTMP의 Adaptive Streaming과 유사함<br />- 표준이 없음<br />
  57. 57. Streaming Protocol – Device별 요약<br />
  58. 58. 참고 – youtube.com media encoding options<br />58<br />http://en.wikipedia.org/wiki/YouTube<br />
  59. 59. Reference I<br />http://www.w3.org/TR/html5/video.html<br />http://en.wikipedia.org/wiki/HTML5_video<br />http://html5demos.com/<br />http://html5gallery.com<br />http://html5test.com<br />http://html5rocks.com<br />http://www.slideshare.net/nathansmith/echo-html5<br />http://www.slideshare.net/DSPIP/flash-and-html5-video<br />http://www.slideshare.net/MatthewFabb/html5-video-vs-flash-video-presentation<br />http://www.slideshare.net/caronf/html5-vs-flash-video<br />http://www.slideshare.net/jimjeffers/building-an-html5-video-player<br />http://www.slideshare.net/anm8tr/html5-video-explained<br />http://www.slideshare.net/danohara/online-video-delivery<br />http://www.slideshare.net/cheilmann/multimedia-on-the-web-html5-video-and-audio<br />http://www.slideshare.net/steveheffernan/html5-video-for-wordpress<br />http://www.slideshare.net/wonsuk73/the-current-status-of-html5-technology-and-standard<br />http://www.slideshare.net/Channy/html5-html5-open-conference<br />http://www.slideshare.net/emotionbank/html5-guide<br />http://www.slideshare.net/CMSummit/ms-internet-trends060710final<br />http://diveintohtml5.org/video.html<br />http://www.html5rocks.com/features/multimedia<br />http://channy.creation.net/blog/776<br />http://shiinatsu-textcube.blogspot.com/2009/09/browser-google-chrome-frame.html<br />http://www.zdnet.co.kr/news/news_view.asp?artice_id=20110307175547<br />http://www.dal.kr/blog/archives/001140.html<br />
  60. 60. Reference II<br />Developing With HTML5: http://www.google.com/events/io/2010/sessions/developing-with-html5.html<br />WebM Open Video Playback in HTML5<br />Using Google Chrome Frame<br />http://www.w3.org/2010/05/video/mediaevents.html<br />http://wonsuk73.tistory.com/15<br />http://techblog.netflix.com/2010/12/html5-and-video-streaming.html<br />http://itagora.tistory.com/194<br />http://chatii.tistory.com/75<br />http://www.longtailvideo.com/support/blog/19578/what-is-video-streaming<br />http://gigaom.com/video/mdialog-tackles-html5-video-security/<br />http://webvideotechniques.com/271/html-5-video-are-we-there-yet<br />http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html<br />http://ajaxian.com/archives/html5-video-youtube-perspective<br />http://www.learningapi.com/2010/09/html5-video-its-a-long-way-til-jquery/<br />http://www.6000rpms.com/blog/2010/03/11/dont-be-conned-html5-is-not-th.html<br />http://www.learningapi.com/2010/09/html5-video-its-a-long-way-til-jquery/<br />http://www.quora.com/HTML5/Does-the-HTML5-video-tag-support-live-video-streaming<br />http://www.pcmag.com/article2/0,2817,2374694,00.asp<br />http://health20.kr/1648<br />http://forums.mozilla.or.kr/viewtopic.php?f=11&t=1361&start=0&sid=ad2779bece5f386e9ef4f7f8280898b7<br />http://www.designlog.org/2511600<br />http://blog.wfmu.org/freeform/2010/05/wfmu-streaming-live-in-html-5.html<br />http://stackoverflow.com/questions/2229118/is-it-possible-to-play-shoutcast-internet-radio-streams-with-html5<br />http://www.trygve-lie.com/blog/entry/html_5_audio_element_and<br />http://dev.opera.com/articles/view/html5-audio-radio-player/<br />60<br />
  61. 61. 감사합니다.<br />Email: yhero96@gmail.com<br />Twitter: @hypermin<br />Facebook: facebook.com/hypermin<br />

×