javascript实现简单的html5视频播放器

效果：

代码很简单

射流研究…

定义(' html5_video_player '，['./avalon-min']，函数(Avalon){函数格式时间(秒){ var秒=Math.round(秒);定义变量分钟=Math.floor(秒/60);秒=Math.floor(秒% 60);分钟=(分钟=10)?分钟： '0 '分钟；秒=(秒=10)?秒： '0 '秒；返回分钟' : '秒；} var playing=false，mute=false，vol=50，fs=false，active=false，inactivitytime out=timer=nullavalon . bind($(' control _ BTN ')，' click '，function(){ if(！正在播放){ $('html5_video ').play()；$('control_btn ').html5_video_pause_btn内联块；播放=真；}else{ $('html5_video ').pause()；$('control_btn ').html5_video_play_btn内联块；播放=假；} });avalon.bind($('video_bar ')，' click '，function(e){ var a=(e . client x-$(' video _ bar ').offsetLeft)/$(“video _ bar”).offsettwidth $(' html 5 _ video ').当前时间=a . tofixed(2)* $(' html 5 _ video ').持续时间；});avalon.bind($('vol_bar ')，' click '，function(e){ var a=(e . client x-$(' vol _ bar ').offsetLeft-8)/$('vol_bar ').offsettwidthvol=$(' html 5 _ video ').体积=a；$(' vol _ value ')。风格。width=a * 100“%”；});avalon.bind($('mute_icon ')，' click '，function(){ if(！静音){ $('html5_video ').体积=0;$("静音图标")。' html 5 _ video _ mute 1 mute=true } else { $(' html 5 _ video ').体积=体积；$("静音图标")。class name=' html 5 _ video _ mute mute=false } })；avalon.bind($('html5_video ')，' loadedmetadata '，function(){ $(' html 5 _ video _ duration ').innerHTML=格式化时间($(' html 5 _ video ').持续时间);$('html5_video ').体积=0;});avalon.bind($('html5_video ')，' timeupdate '，function(){ $('html5_play_time ').innerHTML=格式化时间($(' html 5 _ video ').当前时间)；$(“视频进度条”)。风格。left=$(' html 5 _ video ').currentTime/$('html5_video ').持续时间* 100% ';});阿瓦隆。绑定($(' html 5 _ video _全屏')，'点击'，函数(e){ if(！fs){ toggle _全屏()；} else { exit _全屏()；} });文件。onmozzfullsscreenchange=function(){ if($(' html 5 _ video ')).clientWidth 2！=文档。文档元素。客户端宽度){ exit _全屏()；} };文件。onwebkitfullsscreenchange=function(){ if($(' html 5 _ video ')).clientWidth！=文档。文档元素。客户端宽度){ exit _全屏()；} };函数exit _全屏(){ $(' html 5 _ video ').class name=fs=false active=false $(“video _ control”).className=if(文档。exitflusscreen){ document。exitflusscreen()；} else if(文档。webkitcancelfilscreen){ document。webkitcancelfilscreen()；} else if(文档。mozzcancelfilscreen){ document。mozzcancelfilscreen()；} } function toggle _全屏(){ $(' html 5 _ video ').className=' video _ fsfs=真；$(“视频控制”).' className='全屏；var elem=$(' html 5 _ video ')；if(elem。msrequestfull screen){ elem。msrequest full screen()；} else if(elem。mozzrequestfull全屏){ elem。mozzrequestfull screen()；} else if(elem。webkitrequest全屏){ elem。webkitrequest全屏()；} }函数updateBuffered(){ var v=$(' html 5 _ video ')；var r=v . bufferedif(r){ for(var I=0；ir。长度；I){ var start=r . start(I)；var end=r . end(I)；} $(' video _ buffer _ bar ')。风格。width=end/$(' html 5 _ video ').持续时间* 100% ';} } setInterval(updateBuffered，500)；函数b(){ if(active){ $(' video _ control '))。风格。显示='无'；active=falseconsole.log(活动);} } avalon.bind($('html5_video ')，' mousemove '，函数(e){ if(fs){清除超时(Inactivitytitime out)；active=true $(“video _ control”)。风格。display=" blockInactivityTititime out=set TiME out(b，5000)；} });});超文本标记语言

链接类型=' text/CSS ' href=' http://localhost/Twitter/CSS/html 5 _ video _ player。CSS ' rel='样式表/div id=' wrap _ html 5 _ video ' div id=' html 5 _ video _ area ' video id=' html 5 _ video ' width=' 360 ' height=' 240 '源类型=' video/MP4 ' src=' http 33603358 localhost/Twitter/video/2。MP4/scriptcss

@ CHARSET ' UTF-8 '；# wrap _ html 5 _ video { padd : 10px；宽度： 360 px}#vol_bar，#video_bar，# vol _ value { height: 9px背景色： # 999999;} # vol _ bar { width : 100 pxcursor :指针；} # vol _ value {底色： # 179 df 7；宽度： 50%;} # html5 _ video { display:块；border: 1px固体#契约；} # video _ buffer _ bar {底色： # 179 df7宽度： 0;}#video_progress_bar，# video _ buffer _ bar {位置：绝对值；高度： 100%;} # video _ progress _ bar {底色： # 0066 ff宽度： 2px左： 0；} .html 5 _视频_暂停_ BTN。html 5 _ video _ play _ BTN { width : 40px；高度： 40px光标：指针；} .html 5 _ video _ play _ BTN {背景： URL(' http://localhost/Twitter/images/html 5 _ video。jpg ')0 0不重复；} .html 5 _ video _ play _ BTN :悬停{背景： URL(' http://localhost/Twitter/images/html 5 _ video。jpg’)-41px 0无重复；} .html 5 _ video _ pause _ BTN {背景： URL(' http://localhost/Twitter/images/html 5 _ video。jpg’)0-42px无重复；} .html 5 _ video _ pause _ BTN :悬停{背景： URL(' http://localhost/Twitter/images/html 5 _ video。jpg’)-41px-42px无重复；}#play_control a，#vol_bar {竖排：中间；} # html 5 _ video _全屏{宽度： 25px背景： URL(' http://localhost/Twitter/images/html 5 _ video。jpg ')0-310像素无重复；高度： 18px} # play _ control # html 5 _ video _ time { font-size : 14px；}#play_control li，# play _ control ul { font-size : 0；} # play _ control李：末子{位置：绝对；右： 0；} .html 5 _ video _ mute 1 {背景： URL(' http://localhost/Twitter/images/html 5 _ video。jpg’)无重复滚动-79px-170px rgba(0，0，0，0)；} .html 5 _ video _ mute { background : URL(' http://localhost/Twitter/images/html 5 _ video。jpg’)无重复滚动0 -170px rgba(0，0，0，0)；} #静音_图标{ cursor:指针；显示器：内联块；高度： 15px宽度： 18px} .html 5 _ video _ mute :悬停{背景： URL(' http://localhost/Twitter/images/html 5 _ video。jpg’)-19px-170px无重复；} # play _ control李{身高： 40px垂直对齐： 顶部；margin : 0 5px } # play _ control Li :后{ display : inline-block；宽度： 0;高度： 100%;垂直对齐： 中间；内容： " "；}#play_control，#video_bar，# vol _ bar {位置：相对；}身体。全屏{位置：固定；左： 0；底部： 0；宽度： 100%;飞越：隐藏；z指数： 2147483647;背景-color : # fff；}视频：-网络工具包-媒体-控件{显示器：无！重要；}