html5功能技术介绍科技模板

동영상서비스와웹표준HTML5<video>2021.12민형기CJE&MMusic.Live기술개발실웹어워드2021웹표준&HTML5전략세미나可以在以下情况使用不限次数的用于您个人/公司、企业的商业演示。修改模板中的内容包括，图片，数据，文本的替换。拷贝模板中的内容用于其它幻灯片母版中使用。不可以在以下情况使用用于任何形式的在线付费下载。收集整理我们发布的免费资源后，用于各种形式的付费下载。收集整理我们发布的免费资源后，刻录光碟销售。本PPT由2PPT网收集整理，版权属原作者所有PPT模板下载PPT课件下载PPT背景下载PPT图表下载PPT教程下载随时欢送您访问2PPT网ppt목차1.동영상서비스환경변화2.동영상서비스문제3.동영상서비스기술-PluginbasedVideo-Flashvideo-HTML5video

-HTML5videoDemo

-HTML5video문제점-해결책은?동영상서비스환경변화동영상서비스환경변화-1996~vs.2021~동영상서비스환경변화–BrowserWars://health20.kr/1648동영상서비스환경변화-Devices동영상서비스환경변화–Devices(PCvs.SmartPhone)可以在以下情况使用不限次数的用于您个人/公司、企业的商业演示。修改模板中的内容包括，图片，数据，文本的替换。拷贝模板中的内容用于其它幻灯片母版中使用。不可以在以下情况使用用于任何形式的在线付费下载。收集整理我们发布的免费资源后，用于各种形式的付费下载。收集整理我们发布的免费资源后，刻录光碟销售。本PPT由2PPT网收集整理，版权属原作者所有PPT模板下载PPT课件下载PPT背景下载PPT图表下载PPT教程下载随时欢送您访问2PPT网ppt동영상서비스환경변화–영상서비스의중요성동영상서비스환경변화-클라우드컴퓨팅동영상서비스환경변화–NScreen동영상서비스문제可以在以下情况使用不限次数的用于您个人/公司、企业的商业演示。修改模板中的内容包括，图片，数据，文本的替换。拷贝模板中的内容用于其它幻灯片母版中使用。不可以在以下情况使用用于任何形式的在线付费下载。收集整理我们发布的免费资源后，用于各种形式的付费下载。收集整理我们发布的免费资源后，刻录光碟销售。本PPT由2PPT网收集整理，版权属原作者所有PPT模板下载PPT课件下载PPT背景下载PPT图表下载PPT教程下载随时欢送您访问2PPT网ppt동영상서비스문제–수많은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등)可以在以下情况使用不限次数的用于您个人/公司、企业的商业演示。修改模板中的内容包括，图片，数据，文本的替换。拷贝模板中的内容用于其它幻灯片母版中使用。不可以在以下情况使用用于任何形式的在线付费下载。收集整理我们发布的免费资源后，用于各种形式的付费下载。收集整理我们发布的免费资源后，刻录光碟销售。本PPT由2PPT网收集整理，版权属原作者所有PPT模板下载PPT课件下载PPT背景下载PPT图表下载PPT教程下载随时欢送您访问2PPT网pptFlashVideoFlashVideo역사2002,FlashVideo출시–Sorensonsparkcodec지원2003,FLVformat지원–VP6codec지원2005,youtube에서FlashFLVformat사용2006,H.264codec지원FlashVideo-Market현황DesktopSmartPhoneFlashVideo–CodeExample<objectwidth="425"height="344"><paramname="movie“value="://youtube/v/9sEI1AUFJKw&hl=en&fs=1&"></param><paramname="allowFullScreen“value="true"></param><paramname="allowscriptaccess“value="always"></param><embedsrc="://youtube/v/9sEI1AUFJKw&hl=en&fs=1&"type="application/x-shockwave-flash“allowscriptaccess="always"allowfullscreen="true“width="425"height="344"></embed></object>FlashVideo-Flash문제FlashVideo–ThoughtsonFlashHTML5<video>HTML5<video>HTML5에정의된미디어태그(<audio>,<video>)플러그인설치없이브라우저에서동영상지원하나의태그로다양한video유형을지원JavaScript나ActionScript가필요없음Powerful(simple)APIHTML5<video>지원:IEFirefoxSafariChromeOperaiPhoneAndroid9.0+3.5+3.0+3.0+10.5+1.0+2.0+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://isithackday/mit/transforming-video.htmlDynamicContentInjection://people.mozilla/~prouget/demos/DynamicContentInjection/play.xhtmlCanvasVideoHTML5Video문제점HTML5Video문제점브라우저마다다른코덱정책(Codecfragment)제한된스트리밍프로토콜지원(ProgressiveDownload)컨텐츠보안문제(ContentsProtection)캡슐화+삽입(Encapsulation+Embedding)전체화면지원(FullscreenVideo)카메라+마이크제어라이브스트리밍지원컨텐츠스트림제어/스트림관련부가정보제공광고와관련된Ecosystem(광고관련정보리포팅,분석)스펙이보완중임(~2021)Codec/Container–MP4/H.264

9.0ubiquitous,patentencumbered,licensing/royalties49Codec/Container–OggTheora

“freeandopen〞,nolicensing/royaltiesnotmanytoolsforit,notweboptimised50Codec/Container–WebM/VP8

openandroyalty-free,weboptimised해결책은?하나의파일로재생할순없을까?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://mediaelementjs/ChromeFrameMinimaleffortforbringingIE6,7and8uptothelatestHTML5technologiesTwowaystogetyourwebsitesreadyforChromeFrame:Clientside:

Serverside:

<meta-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-HTTPDynamicStreaming:Flash-HttpLiveStreaming:iOS,Android3.0-SmoothStreaming:Silverlight,IISMediaServiceExtension-DASH(DynamicAdaptiveStreamingoverHTTP):MPEG표준화협회

-RTMP의AdaptiveStreaming과유사함-표준이없음StreamingProtocol–Device별요약DevicesPr