HTML适配与功能技术介绍韩国科技PPT模板

동영상서비스와웹표준HTML5video2011.12민형기CJE&MMusic.Live기술개발실웹어워드2011웹표준&HTML5전략세미나목차1.동영상서비스환경변화2.동영상서비스문제3.동영상서비스기술-PluginbasedVideo-Flashvideo-HTML5video-HTML5videoDemo-HTML5video문제점-해결책은?동영상서비스환경변화동영상서비스환경변화-1996~vs.2010~동영상서비스환경변화–BrowserWars동영상서비스환경변화-Devices동영상서비스환경변화–Devices(PCvs.SmartPhone)동영상서비스환경변화–영상서비스의중요성동영상서비스환경변화-클라우드컴퓨팅동영상서비스환경변화–NScreen동영상서비스문제동영상서비스문제–수많은Devices동영상서비스문제–다양한멀티미디어표준MultimediaCodingonthewebisfragmentedManyvideocodecs:DIVX,XVID,H264WMV,VC-1,VP8ManyContainers(FileFormat):AVI,MKVMP4,FLVManydeliverymethodsRTSP/RTPStreaming,ProgressivedownloadLiveHttpStreaming,SmoothStreaming동영상서비스문제–많은비용동영상서비스문제–해결책은?웹표준기술사용코덱표준화컨테이너표준화비트레이트표준화프로파일표준화전송규격표준화온라인동영상서비스기술PluginBasedVideoFlashVideoHTML5VideoPluginBasedVideoPluginBasedVideo문제OS와브라우저에조합에따른복잡한Video지원문제예)Mac의FF에서wmv다양한코덱이필요예)wmv,mov,rm등Plugin기술을사용하여사용자설치문제발생(ActiveX등)FlashVideoFlashVideo역사2002,FlashVideo출시–Sorensonsparkcodec지원2003,FLVformat지원–VP6codec지원2005,youtube.com에서FlashFLVformat사용2006,H.264codec지원FlashVideo-Market현황DesktopSmartPhoneFlashVideo–CodeExampleFlashVideo-Flash문제FlashVideo–ThoughtsonFlashHTML5videoHTML5videoHTML5에정의된미디어태그(audio,video)플러그인설치없이브라우저에서동영상지원하나의태그로다양한video유형을지원JavaScript나ActionScript가필요없음Powerful(simple)APIHTML5video지원:IEFirefoxSafariChromeOperaiPhoneAndroid9.0+3.5+3.0+3.0+10.5+1.0+2.0+HTML5video-Example브라우저내장컨트롤사용ControllingvideowithJavaScriptvarv=document.getElementById('player');v.play();v.pause();v.volume=...;v.currentTime=...;...videomethods&attributesvarvideo=$('video').get(0);video.play();video.pause();video.paused;//Returnstrueifvideoispaused.video.ended;//Returnstrueifvideoisover.video.volume;//Returnsvolumevalue(between0-1)video.volume=0.5;//Setsvolumevalue(between0-1)video.currentTime;//Currentpointoftimeinthevideo.video.length;//Returnsthelengthinseconds.video.seekable;//Returnstrueifsupportsseeking.video.playbackRate;//Allowsyoutorewind/fastforward.주요속성및주요함수src:멀티미디어파일소스지정currentTime:현재재생위치를초단위로반환duration:전체재생시간을초단위로반환paused:일시정지여부반환ended:재생종료어부반환muted:음소거여부반환volume:볼륨값(0.0~1.0범위를가짐)error:에러정보를반환networkState:멀티미디어파일과관련된네트워크상태반환(접속전,로딩중,완료,로딩실패등)주요함수load():멀티미디어를읽어들임(재생하지는않음)play():멀티미디어를재생함pause():일시정지Eventsfiredbyvideovarv=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:멀티미디어로딩,재생과관련한에러가있을시발생HTML5VideoDemoDemo-Videowithexternalcontrols내장videoUI컨트롤OPERASAFARIFIREFOXCHROMEIE9Demo-FancyvideocontrolswithJavascript://people.opera.com/patrickl/experiments/webm/fancy-swap/Demo-HTML5VideoEventsandAPIDemo-TransformingHTML5videowithCSS3://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtmlCanvasVideo문제점HTML5Video문제점브라우저마다다른코덱정책(Codecfragment)제한된스트리밍프로토콜지원(ProgressiveDownload)컨텐츠보안문제(ContentsProtection)캡슐화+삽입(Encapsulation+Embedding)전체화면지원(FullscreenVideo)카메라+마이크제어라이브스트리밍지원컨텐츠스트림제어/스트림관련부가정보제공광고와관련된Ecosystem(광고관련정보리포팅,분석)스펙이보완중임(~2015)Codec/Container–MP4/H.2649.0ubiquitous,patentencumbered,licensing/royalties=video45Codec/Container–OggTheora“freeandopen”,nolicensing/royaltiesnotmanytoolsforit,notweboptimised46Codec/Container–WebM/VP8openandroyalty-free,weboptimised47해결책은?하나의파일로재생할순없을까?H.264viaHTML5withafallbacktoFlashorSilverlight(playingthesamefile)ifthebrowsercannotplayH.264nativelyviavideo.HTML5video+Flashvideovideocontrolsautoplayposter=...width=...height=...sourcesrc=movie.mp4type=video/mp4/sourcesrc=movie.webmtype=video/webm/sourcesrc=movie.ogvtype=video/ogg/objectwidth=...height=...type=application/x-shockwave-flashdata=player.swfparamname=movievalue=player.swf/paramname=flashvarsvalue=...file=movie.mp4/!--fallbackcontent--/object/videoCSSstyledvideocontrols–MediaElementJS.comMinimaleffortforbringingIE6,7and8uptothelatestHTML5technologiesTwowaystogetyourwebsitesreadyforChromeFrame:Clientside:Serverside:metahttp-equiv=X-UA-Compatible”content=chrome=1X-UA-Compatible:chrome=1스트리밍프로토콜StreamingProtocol–ProgressiveDownload-VideoDelivery방법으로가장폭넓게사용됨-적용하기가제일쉬움-Flash와HTML5audio,video,iOS,Android에서지원함-전송트래픽이많이발생함-큰파일에는적합하지않음(작은클립에맞음)-라이브스트리밍은지원하지않음StreamingProtocol–RTMP/RTSPStreaming-RTMP+Flash의StreamingProtocol,