html5 video
DESCRIPTION
동영상과 웹표준(HTML5 video) 웹어워드 2011 웹표준 & HTML5 전략 세미나 발표자료: http://goo.gl/vI1H2TRANSCRIPT
동영상 서비스와 웹표준HTML5 <video>
2011.5.24
민형기
CJ E&M Music.Live 기술개발실
웹어워드 2011 웹표준 & HTML5 전략 세미나
목 차
1. 동영상 서비스 환경변화2. 동영상 서비스 문제3. 동영상 서비스 기술 - Plugin based Video - Flash video - HTML5 video - HTML5 video Demo - HTML5 video 문제점 - 해결책은 ?
동영상 서비스 환경변화
동영상 서비스 환경변화 - 1996~ vs. 2010~
동영상 서비스 환경변화 - Devices
동영상 서비스 환경변화 – Devices (PC vs. Smart-Phone)
동영상 서비스 환경변화 – 영상서비스의 중요성
동영상 서비스 환경변화 - 클라우드 컴퓨팅
동영상 서비스 환경변화 – N Screen
동영상 서비스 문제
동영상 서비스 문제 – 수많은 Devices
동영상 서비스 문제 – 다양한 멀티미디어 표준
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
동영상 서비스 문제 – 많은 비용
동영상 서비스 문제 – 해결책은 ?
웹 표준기술 사용 코덱 표준화 컨테이너 표준화 비트레이트 표준화 프로파일 표준화 전송규격 표준화
온라인 동영상 서비스 기술
Plugin Based VideoFlash Video
HTML5 Video
Plugin Based Video
Plugin Based Video 문제
OS 와 브라우저에 조합에 따른 복잡한 Video 지원문제– 예 ) Mac 의 FF 에서 wmv
다양한 코덱이 필요– 예 ) wmv, mov, rm 등
Plugin 기술을 사용하여 사용자 설치문제 발생 (ActiveX 등 )
Flash Video
Flash Video 역사
2002, Flash Video 출시 – Sorenson spark codec 지원
2003, FLV format 지원 – VP6 codec 지원
2005, youtube.com 에서 Flash FLV format 사용
2006, H.264 codec 지원
Flash Video - Market 현황
http://www.adobe.com/products/player_census/flashplayer/mobile_penetration.html
http://www.adobe.com/products/player_census/flashplayer/
Desktop SmartPhone
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>
Flash Video - Flash 문제
Flash Video – Thoughts on Flash
http://www.apple.com/hotnews/thoughts-on-flash/
HTML5 <video>
HTML5 <video>
HTML5 에 정의된 미디어 태그 (<audio>, <video>)
플러그인 설치 없이 브라우저에서 동영상 지원
하나의 태그로 다양한 video 유형을 지원
JavaScript 나 ActionScript 가 필요 없음
Powerful (simple) API
HTML5 <video> 지원 :
IE Firefox Safari Chrome Opera iPhone Android
9.0+ 3.5+ 3.0+ 3.0+ 10.5+ 1.0+ 2.0+
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>
브라우저 내장 컨트롤 사용
Controlling <video> with JavaScript
var v = document.getElementById('player');
v.play();v.pause();v.volume = ... ;v.currentTime = ... ;...
<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.
주요 속성 및 주요 함수
src: 멀티미디어 파일 소스 지정 currentTime: 현재 재생 위치를 초 단위로 반환 duration: 전체 재생시간을 초 단위로 반환 paused: 일시정지 여부 반환 ended: 재생 종료 어부 반환 muted: 음소거 여부 반환 volume: 볼륨 값 (0.0 ~ 1.0 범위를 가짐 ) error: 에러 정보를 반환 networkState: 멀티미디어 파일과 관련된 네트워크 상태 반환 ( 접속전 ,
로딩 중 , 완료 , 로딩 실패 등 )
주요 함수 load(): 멀티미디어를 읽어 들임 ( 재생하지는 않음 ) play(): 멀티미디어를 재생함 pause(): 일시 정지
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)...
주요 이벤트
play: 재생될 때 발생 progress: 멀티미디어 파일을 로딩중에 지속적 (
그리고 간헐적 ) 발생 timeupdate: 재생 중에 지속적 발생 ended: 재생 종료시 발생 error: 멀티미디어 로딩 , 재생과 관련한 에러가 있을
시 발생
HTML5 Video Demo
Demo - Video with external controls
http://people.opera.com/patrickl/experiments/webm/basic-controls/
내장 <video> UI 컨트롤
OPERA
SAFARI
FIREFOX
CHROME
IE9
Demo - Fancy video controls with Javascript
http://people.opera.com/patrickl/experiments/webm/fancy-controls/
Demo - Fancy video swap
http://people.opera.com/patrickl/experiments/webm/fancy-swap/
Demo - HTML5 Video Events and API
http://www.w3.org/2010/05/video/mediaevents.html
Demo - Transforming HTML5 video with CSS3
http://isithackday.com/mit/transforming-video.html
Dynamic Content Injection
http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml
Canvas Video
http://craftymind.com/factory/html5video/CanvasVideo.html
HTML5 Video 문제점
HTML5 Video 문제점
브라우저 마다 다른 코덱정책 (Codec fragment) 제한된 스트리밍 프로토콜 지원 (Progressive Down-
load) 컨텐츠 보안 문제 (Contents Protection) 캡슐화 + 삽입 (Encapsulation + Embedding) 전체화면 지원 (Fullscreen Video) 카메라 + 마이크 제어 라이브 스트리밍 지원 컨텐츠 스트림 제어 / 스트림관련 부가정보 제공 광고와 관련된 Ecosystem ( 광고관련정보 리포팅 ,
분석 ) 스펙이 보완중임 (~2015)
Codec/Container – MP4/H.264
9.0
ubiquitous, patent encumbered, licensing/royalties
http://caniuse.com/#search=video
Codec/Container – Ogg Theora
“free and open”, no licensing/royal-tiesnot many tools for it, not web opti-mised
Codec/Container – WebM/VP8
open and royalty-free, web optimised
해결책은 ?
하나의 파일로 재생할 순 없을까 ?
H.264 via HTML5 with a fall-back
to Flash or Silverlight (playing the
same file) if the browser can-not
play H.264 natively via <video>.
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>
CSS styled video controls – MediaElemen-tJS.com
http://mediaelementjs.com/
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/
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
스트리밍 프로토콜
Streaming Protocol – Progressive Download
- Video Delivery 방법으로 가장 폭넓게 사용됨- 적용하기가 제일 쉬움- Flash 와 HTML5 audio, video, iOS, Android 에서 지원함- 전송트래픽이 많이 발생함- 큰 파일에는 적합하지 않음 ( 작은 클립에 맞음 )- 라이브 스트리밍은 지원하지 않음
Streaming Protocol – RTMP/RTSP Streaming
- RTMP +Flash 의 Streaming Protocol, FMS, Wowza, 대부분의 CDN 에서 제공함 +Bandwith efficiency, Quality switching- RTSP: Android 에서 지원함- 비싼 유지비용- 전용서버 , 전용프로토콜 (rtsp/554, rtmp/1935, rtmpt/80)- 방화벽 문제 발생가능 ( 사내 방화벽 정책에 따라 막힐 수 있음 )- 대용량 파일 , 라이브 지원가능
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 과 유사함- 표준이 없음
Streaming Protocol – Device 별 요약
Devices Progressive Download
RTMP/RTSP Streaming Adaptive HTTP Streaming
Adobe Flash Player MP4, FLV RTMP HLS, Zeri, Smooth
HTML5 (Safari & IE9) MP4 - -
HTML5 (Firefox & Chrome) WebM - -
iOS (iPad/iPhone) MP4 - HLS
Android Devices MP4, WebM RTSP HLS (as of 3.0)
CDNs (e.g. CloudFront) MP4, FLV, WebM RTMP HLS
Web Servers (e.g. S3) MP4, FLV, WebM - HLS
참고 – youtube.com media encoding options
fmt value 5 34 35 18 22 37 38 43 45 17
Default container FLV MP4 WebM 3GP
Video
Encoding SorensonH.263
MPEG-4 AVC (H.264) VP8 MPEG-4Visual
Profile – MainBase-line High – –
Max width (pixels) 400 640 854 480 1280 1920 4096 640 1280 176
Max height (pixels) 240 360 480 360 720 1080 3072 360 720 144
Bitrate(Mbit/s) 0.25 0.5 0.8 - 1 0.5 2 - 2.9 3.5 - 5 – 0.5 2 –
Audio
Encoding MP3 AAC Vorbis AAC
Channels 1–2 2 (stereo)
Sampling rate (Hz) 22050 44100
Bitrate(kbit/s) 64 128 96 152 128 192 –
58http://en.wikipedia.org/wiki/YouTube
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
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
