Html5 video

  • 9,886 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
9,886
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
169
Comments
1
Likes
3

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