Your SlideShare is downloading. ×
0
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Html5 video
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5 video

10,587

Published on

동영상과 웹표준(HTML5 video) …

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×