蓝色抽光背景PPT模板

동영상서비스와웹표준HTML5<video>

민형기CJE&MMusic.Live기술개발실웹어워드2023웹표준&HTML5전략세미나목차1.동영상서비스환경변화2.동영상서비스문제3.동영상서비스기술-PluginbasedVideo-Flashvideo-HTML5video-HTML5videoDemo-HTML5video문제점-해결책은?동영상서비스환경변화동영상서비스환경변화-1996~vs.2023~동영상서비스환경변화–BrowserWarshttp://health20.kr/16485동영상서비스환경변화-Devices동영상서비스환경변화–Devices(PCvs.SmartPhone)동영상서비스환경변화–영상서비스의중요성동영상서비스환경변화-클라우드컴퓨팅동영상서비스환경변화–NScreen10동영상서비스문제동영상서비스문제–수많은Devices동영상서비스문제–다양한멀티미디어표준MultimediaCodingonthewebisfragmentedManyvideocodecs:DIVX,XVID,H264WMV,VC-1,VP8ManyContainers(FileFormat):AVI,MKVMP4,FLVManydeliverymethodsRTSP/RTPStreaming,ProgressivedownloadLiveHttpStreaming,SmoothStreaming동영상서비스문제–많은비용동영상서비스문제–해결책은?웹표준기술사용코덱표준화컨테이너표준화비트레이트표준화프로파일표준화전송규격표준화온라인동영상서비스기술PluginBasedVideoFlashVideoHTML5VideoPluginBasedVideoPluginBasedVideo문제OS와브라우저에조합에따른복잡한Video지원문제예)Mac의FF에서wmv다양한코덱이필요예)wmv,mov,rm등Plugin기술을사용하여사용자설치문제발생(ActiveX등)FlashVideoFlashVideo역사2023,FlashVideo출시–Sorensonsparkcodec지원2023,FLVformat지원–VP6codec지원2023,에서FlashFLVformat사용2023,H.264codec지원FlashVideo-Market현황

DesktopSmartPhone21FlashVideo–CodeExample

FlashVideo-Flash문제FlashVideo–ThoughtsonFlashHTML5<video>HTML5<video>HTML5에정의된미디어태그(<audio>,<video>)플러그인설치없이브라우저에서동영상지원하나의태그로다양한video유형을지원JavaScript나ActionScript가필요없음Powerful(simple)APIHTML5<video>지원:HTML5<video>-Example<videowidth="480"height="380“controls><sourcesrc="/{...}_512kb.mp4"

type="video/mp4"></source><sourcesrc="/{...}nsters.ogv"

type="video/ogg"></source><p>Yourbrowserdoesn'tlikeHTML5video,watchthemovieon<aref="/{...}_monsters"></a>.</p></video>브라우저내장컨트롤사용Controlling<video>withJavaScriptvarv=document.getElementById('player');v.play();v.pause();v.volume=...;v.currentTime=...;...<video>

methods&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():일시정지

Eventsfiredby<video>varv=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내장<video>UI컨트롤OPERASAFARIFIREFOXCHROMEIE9Demo-FancyvideocontrolswithJavascriptDemo-FancyvideoswapDemo-HTML5VideoEventsandAPIDemo-TransformingHTML5videowithCSS3/mit/transforming-video.htmlDynamicContentInjection/~prouget/demos/DynamicContentInjection/play.xhtmlCanvasVideo/factory/html5video/CanvasVideo.htmlHTML5Video문제점HTML5Video문제점브라우저마다다른코덱정책(Codecfragment)제한된스트리밍프로토콜지원(ProgressiveDownload)컨텐츠보안문제(ContentsProtection)캡슐화+삽입(Encapsulation+Embedding)전체화면지원(FullscreenVideo)카메라+마이크제어라이브스트리밍지원컨텐츠스트림제어/스트림관련부가정보제공광고와관련된Ecosystem(광고관련정보리포팅,분석)스펙이보완중임(~2023)Codec/Container–MP4/H.264

9.0ubiquitous,patentencumbered,licensing/royalties

Codec/Container–OggTheora

“freeandopen”,nolicensing/royaltiesnotmanytoolsforit,notweboptimised45Codec/Container–WebM/VP8

openandroyalty-free,weboptimised46해결책은?47하나의파일로재생할순없을까?H.264viaHTML5withafallbacktoFlashorSilverlight(playingthesamefile)ifthebrowsercannotplayH.264nativelyvia<video>.HTML5video+Flashvideo<videocontrolsautoplayposter="..."width="..."height="..."><sourcesrc="movie.mp4"type="video/mp4"/><sourcesrc="movie.webm"type="video/webm"/><sourcesrc="movie.ogv"type="video/ogg"/><objectwidth="..."height="..."type="application/x-shockwave-flash"data="player.swf"><paramname="movie"value="player.swf"/><paramname="flashvars"value="...file=movie.mp4"/><!--fallbackcontent--></object></video>CSSstyledvideocontrols–MediaElementJS.com/JavaScript<video>libraries/sublime/video//ChromeFrameMinimaleffortforbringingIE6,7and8uptothelatestHTML5technologiesTwowaystogetyourwebsitesreadyforChromeFrame:Clientside:

Serverside:

<metahttp-equiv="X-UA-Compatible”content="chrome=1">X-UA-Compatible:chrome=1스트리밍프로토콜StreamingProtocol–ProgressiveDownload-VideoDelivery방법으로가장폭넓게사용됨-적용하기가제일쉬움-Flash와HTML5audio,video,iOS,Android에서지원함-전송트래픽이많이발생함-큰파일에는적합하지않음(작은클립에맞음)-라이브스트리밍은지원하지않음StreamingProtocol–RTMP/RTSPStreaming-RTMP+Flash의StreamingProtocol,FMS,Wowza,대부분의CDN에서제공함+Bandwithefficiency,Qualityswitching-RTSP:Android에서지원함-비싼유지비용-전용서버,전용프로토콜(rtsp/554,rtmp/1935,rtmpt/80)-방화벽문제발생가능(사내방화벽정책에따라막힐수있음)-대용량파일,라이브지원가능StreamingProtocol–AdaptiveHTTPStreaming-HTTPDynamicStrea