??????????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