Html5 video

11,374
-1

Published on

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

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
11,374
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
183
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

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 />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×