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

1. 웹어워드2011 웹표준& HTML5 전략 세미나 동영상 서비스와 웹표준 HTML5 <video> 2011.5.24 민형기 CJ E&M Music.Live기술개발실

2. 목 차 1. 동영상 서비스 환경변화 2. 동영상 서비스 문제 3. 동영상 서비스 기술 - Plugin based Video - Flash video - HTML5 video - HTML5 video Demo - HTML5 video 문제점 - 해결책은?

3. 동영상 서비스 환경변화

4. 동영상 서비스 환경변화 - 1996~ vs. 2010~

5. 동영상 서비스 환경변화 – Browser Wars http://health20.kr/1648

6. 동영상 서비스 환경변화 - Devices

7. 동영상 서비스 환경변화 – Devices (PC vs. SmartPhone)

8. 동영상 서비스 환경변화 – 영상서비스의 중요성

9. 동영상 서비스 환경변화 - 클라우드 컴퓨팅

10. 동영상 서비스 환경변화 – N Screen

11. 동영상 서비스 문제

12. 동영상 서비스 문제 – 수많은 Devices

13. 동영상 서비스 문제 – 다양한 멀티미디어 표준 Multimedia Coding on the web is fragmented Many video codecs: DIVX, XVID, H264 WMV, VC-1, VP8 Many Containers (File Format): AVI, MKV MP4, FLV Many delivery methods RTSP/RTP Streaming, Progressive download Live Http Streaming, Smooth Streaming

14. 동영상 서비스 문제 – 많은 비용

15. 동영상 서비스 문제 – 해결책은? 웹 표준기술 사용 코덱 표준화 컨테이너 표준화 비트레이트 표준화 프로파일 표준화 전송규격 표준화

16. 온라인 동영상 서비스 기술 Plugin Based Video Flash Video HTML5 Video

17. Plugin Based Video

18. Plugin Based Video 문제 OS와 브라우저에 조합에 따른 복잡한 Video 지원문제 예) Mac의 FF에서 wmv 다양한 코덱이 필요 예) wmv, mov, rm등 Plugin기술을 사용하여 사용자 설치문제 발생 (ActiveX 등)

19. Flash Video

20. Flash Video 역사 2002, Flash Video 출시 – Sorenson spark codec 지원 2003, FLV format 지원 – VP6 codec 지원 2005, youtube.com에서 Flash FLV format 사용 2006, H.264 codec 지원

21. Flash Video - Market 현황 SmartPhone Desktop http://www.adobe.com/products/player_census/flashplayer/ http://www.adobe.com/products/player_census/flashplayer/mobile_penetration.html

22. Flash Video – Code Example <object width="425" height="344"> <param name="movie“ value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en &fs=1&"> </param> <param name="allowFullScreen“ value="true"></param> <param name="allowscriptaccess“ value="always"></param> <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> </object>

23. Flash Video - Flash 문제

24. Flash Video – Thoughts on Flash http://www.apple.com/hotnews/thoughts-on-flash/

25. HTML5 <video>

26. HTML5 <video> HTML5에 정의된 미디어 태그 (<audio>, <video>) 플러그인 설치 없이 브라우저에서 동영상 지원 하나의 태그로 다양한 video 유형을 지원 JavaScript나 ActionScript가 필요 없음 Powerful (simple) API HTML5 <video>지원:

27. HTML5 <video> - Example 브라우저 내장 컨트롤 사용 <video width="480" height="380“ controls> <source src="http://www.archive.org/{...}_512kb.mp4" type="video/mp4"></source> <source src="http://www.archive.org/{...}nsters.ogv" type="video/ogg"></source> <p>Your browser doesn't like HTML5 video, watch the movie on <a ref="http://www.archive.org/{...}_monsters"> archive.org</a>. </p> </video>

28. Controlling <video> with JavaScript var v = document.getElementById('player'); v.play(); v.pause(); v.volume = ... ; v.currentTime = ... ; ...

29. <video>methods & attributes var video = $('video').get(0); video.play (); video.pause(); video.paused; // Returns true if video is paused. video.ended; // Returns true if video is over. video.volume; // Returns volume value ( between 0-1 ) video.volume=0.5; // Sets volume value ( between 0-1 ) video.currentTime; // Current point of time in the video. video.length; // Returns the length in seconds. video.seekable; // Returns true if supports seeking. video.playbackRate; // Allows you to rewind/fastforward.

30. 주요 속성 및 주요 함수 src: 멀티미디어 파일 소스 지정 currentTime: 현재 재생 위치를 초 단위로 반환 duration: 전체 재생시간을 초 단위로 반환 paused: 일시정지 여부 반환 ended: 재생 종료 어부 반환 muted: 음소거 여부 반환 volume: 볼륨 값(0.0 ~ 1.0 범위를 가짐) error: 에러 정보를 반환 networkState: 멀티미디어 파일과 관련된 네트워크 상태 반환(접속전, 로딩 중, 완료, 로딩 실패 등) 주요 함수 load(): 멀티미디어를 읽어 들임(재생하지는 않음) play(): 멀티미디어를 재생함 pause(): 일시 정지

31. Events fired by <video> var v = document.getElementById('player'); v.addEventListener('loadeddata', function() { ... }, true) v.addEventListener('play', function() { ... }, true) v.addEventListener('pause', function() { ... }, true) v.addEventListener('timeupdate', function() { ... }, true) v.addEventListener('ended', function() { ... }, true) ...

32. 주요 이벤트 play: 재생될 때 발생 progress: 멀티미디어 파일을 로딩중에 지속적(그리고 간헐적) 발생 timeupdate: 재생 중에 지속적 발생 ended: 재생 종료시발생 error: 멀티미디어 로딩, 재생과 관련한 에러가 있을 시 발생

33. HTML5 Video Demo

34. Demo - Video with external controls http://people.opera.com/patrickl/experiments/webm/basic-controls/

35. 내장 <video> UI 컨트롤 OPERA SAFARI FIREFOX CHROME IE9

36. Demo - Fancy video controls with Javascript http://people.opera.com/patrickl/experiments/webm/fancy-controls/

37. Demo - Fancy video swap http://people.opera.com/patrickl/experiments/webm/fancy-swap/

38. Demo - HTML5 Video Events and API http://www.w3.org/2010/05/video/mediaevents.html

39. Demo - Transforming HTML5 video with CSS3 http://isithackday.com/mit/transforming-video.html

40. Dynamic Content Injection http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml

41. Canvas Video http://craftymind.com/factory/html5video/CanvasVideo.html

42. HTML5 Video 문제점

43. HTML5 Video 문제점 브라우저 마다 다른 코덱정책(Codec fragment) 제한된 스트리밍 프로토콜 지원(Progressive Download) 컨텐츠 보안 문제 (Contents Protection) 캡슐화 + 삽입(Encapsulation + Embedding) 전체화면 지원(Fullscreen Video) 카메라 + 마이크 제어 라이브 스트리밍 지원 컨텐츠스트림 제어 / 스트림관련 부가정보 제공 광고와 관련된 Ecosystem (광고관련정보 리포팅, 분석) 스펙이 보완중임 (~2015)

44. Codec/Container – MP4/H.264 9.0 ubiquitous, patent encumbered, licensing/royalties http://caniuse.com/#search=video

45. Codec/Container – OggTheora “free and open”, no licensing/royalties not many tools for it, not web optimised

46. Codec/Container – WebM/VP8 open and royalty-free, web optimised

47. 해결책은?

48. 하나의 파일로 재생할 순 없을까? H.264 via HTML5 with a fallback to Flash or Silverlight (playing the same file) if the browser cannot play H.264 natively via <video>.

49. HTML5 video + Flash video <video controls autoplay poster="..." width="..." height="..."> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> <source src="movie.ogv" type="video/ogg" /> <object width="..." height="..." type="application/x-shockwave-flash" data="player.swf"> <param name="movie" value="player.swf" /> <param name="flashvars" value=" ... file=movie.mp4" /> <!-- fallback content --> </object> </video>

50. CSS styled video controls – MediaElementJS.com http://mediaelementjs.com/

51. JavaScript <video> libraries http://videojs.com http://projekktor.com http://jwplayer.com http://jilion.com/sublime/video http://mediaelementjs.com http://jplayer.org/ http://sublimevideo.net/

52. Chrome Frame Minimal effort for bringing IE6, 7 and 8 up to the latest HTML5 technologies Two ways to get your websites ready for Chrome Frame: Client side: Server side: <meta http-equiv="X-UA-Compatible” content="chrome=1"> X-UA-Compatible: chrome=1 http://www.chromium.org/developers/how-tos/chrome-frame-getting-started

53. 스트리밍 프로토콜

54. Streaming Protocol – Progressive Download - Video Delivery 방법으로 가장 폭넓게 사용됨 - 적용하기가 제일 쉬움 - Flash와 HTML5 audio, video, iOS, Android에서 지원함 - 전송트래픽이 많이 발생함 - 큰 파일에는 적합하지 않음(작은 클립에 맞음) - 라이브 스트리밍은 지원하지 않음

55. Streaming Protocol – RTMP/RTSP Streaming - RTMP +Flash의 Streaming Protocol, FMS, Wowza, 대부분의 CDN에서 제공함 +Bandwith efficiency, Quality switching - RTSP: Android에서 지원함 - 비싼 유지비용 - 전용서버, 전용프로토콜(rtsp/554, rtmp/1935, rtmpt/80) - 방화벽 문제 발생가능 (사내 방화벽 정책에 따라 막힐 수 있음) - 대용량 파일, 라이브 지원가능

56. Streaming Protocol – Adaptive HTTP Streaming - HTTP Dynamic Streaming : Flash - Http Live Streaming: iOS, Android 3.0 - Smooth Streaming: Silverlight, IIS Media Service Extension - DASH(Dynamic Adaptive Streaming over HTTP): MPEG 표준화 협회- RTMP의 Adaptive Streaming과 유사함 - 표준이 없음

57. Streaming Protocol – Device별 요약

58. 참고 – youtube.com media encoding options 58 http://en.wikipedia.org/wiki/YouTube

59. Reference I http://www.w3.org/TR/html5/video.html http://en.wikipedia.org/wiki/HTML5_video http://html5demos.com/ http://html5gallery.com http://html5test.com http://html5rocks.com http://www.slideshare.net/nathansmith/echo-html5 http://www.slideshare.net/DSPIP/flash-and-html5-video http://www.slideshare.net/MatthewFabb/html5-video-vs-flash-video-presentation http://www.slideshare.net/caronf/html5-vs-flash-video http://www.slideshare.net/jimjeffers/building-an-html5-video-player http://www.slideshare.net/anm8tr/html5-video-explained http://www.slideshare.net/danohara/online-video-delivery http://www.slideshare.net/cheilmann/multimedia-on-the-web-html5-video-and-audio http://www.slideshare.net/steveheffernan/html5-video-for-wordpress http://www.slideshare.net/wonsuk73/the-current-status-of-html5-technology-and-standard http://www.slideshare.net/Channy/html5-html5-open-conference http://www.slideshare.net/emotionbank/html5-guide http://www.slideshare.net/CMSummit/ms-internet-trends060710final http://diveintohtml5.org/video.html http://www.html5rocks.com/features/multimedia http://channy.creation.net/blog/776 http://shiinatsu-textcube.blogspot.com/2009/09/browser-google-chrome-frame.html http://www.zdnet.co.kr/news/news_view.asp?artice_id=20110307175547 http://www.dal.kr/blog/archives/001140.html

60. Reference II Developing With HTML5: http://www.google.com/events/io/2010/sessions/developing-with-html5.html WebM Open Video Playback in HTML5 Using Google Chrome Frame http://www.w3.org/2010/05/video/mediaevents.html http://wonsuk73.tistory.com/15 http://techblog.netflix.com/2010/12/html5-and-video-streaming.html http://itagora.tistory.com/194 http://chatii.tistory.com/75 http://www.longtailvideo.com/support/blog/19578/what-is-video-streaming http://gigaom.com/video/mdialog-tackles-html5-video-security/ http://webvideotechniques.com/271/html-5-video-are-we-there-yet http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html http://ajaxian.com/archives/html5-video-youtube-perspective http://www.learningapi.com/2010/09/html5-video-its-a-long-way-til-jquery/ http://www.6000rpms.com/blog/2010/03/11/dont-be-conned-html5-is-not-th.html http://www.learningapi.com/2010/09/html5-video-its-a-long-way-til-jquery/ http://www.quora.com/HTML5/Does-the-HTML5-video-tag-support-live-video-streaming http://www.pcmag.com/article2/0,2817,2374694,00.asp http://health20.kr/1648 http://forums.mozilla.or.kr/viewtopic.php?f=11&t=1361&start=0&sid=ad2779bece5f386e9ef4f7f8280898b7 http://www.designlog.org/2511600 http://blog.wfmu.org/freeform/2010/05/wfmu-streaming-live-in-html-5.html http://stackoverflow.com/questions/2229118/is-it-possible-to-play-shoutcast-internet-radio-streams-with-html5 http://www.trygve-lie.com/blog/entry/html_5_audio_element_and http://dev.opera.com/articles/view/html5-audio-radio-player/ 60

61. 감사합니다. Email: yhero96@gmail.com Twitter: @hypermin Facebook: facebook.com/hypermin