效果：
代码很简单
js
define(html5_video_player, [ '../avalon-min'], function(avalon) { function formattime(seconds) { var seconds = math.round(seconds); var minutes = math.floor(seconds / 60); seconds = math.floor(seconds % 60); minutes = (minutes >= 10) ? minutes : 0 + minutes; seconds = (seconds >= 10) ? seconds : 0 + seconds; return minutes + : + seconds; } var playing=false,mute=false,vol=50,fs=false,active=false,inactivitytimeout=timer=null; avalon.bind($('control_btn'),'click',function(){ if(!playing){ $('html5_video').play(); $('control_btn').classname='html5_video_pause_btn inline-block'; playing=true; }else{ $('html5_video').pause(); $('control_btn').classname='html5_video_play_btn inline-block'; playing=false; } }); avalon.bind($('video_bar'),'click',function(e){ var a=(e.clientx-$('video_bar').offsetleft)/$('video_bar').offsetwidth; $('html5_video').currenttime =a.tofixed(2)*$('html5_video').duration; }); avalon.bind($('vol_bar'),'click',function(e){ var a=(e.clientx-$('vol_bar').offsetleft-8)/$('vol_bar').offsetwidth; vol=$('html5_video').volume =a; $('vol_value').style.width=a*100+'%'; }); avalon.bind($('mute_icon'),'click',function(){ if(!mute){ $('html5_video').volume=0; $('mute_icon').classname='html5_video_mute1'; mute=true; }else{ $('html5_video').volume=vol; $('mute_icon').classname='html5_video_mute'; mute=false; } }); avalon.bind($('html5_video'),'loadedmetadata',function(){ $('html5_video_duration').innerhtml=formattime($('html5_video').duration); $('html5_video').volume=0; }); avalon.bind($('html5_video'),'timeupdate',function(){ $('html5_play_time').innerhtml=formattime($('html5_video').currenttime); $('video_progress_bar').style.left=$('html5_video').currenttime/$('html5_video').duration*100+'%'; }); avalon.bind($('html5_video_fullscreen'),'click',function(e){ if(!fs){ toggle_fullscreen(); }else{ exit_fullscreen(); } }); document.onmozfullscreenchange = function() { if ($('html5_video').clientwidth +2!= document.documentelement.clientwidth) { exit_fullscreen(); } }; document.onwebkitfullscreenchange = function() { if ($('html5_video').clientwidth!= document.documentelement.clientwidth) { exit_fullscreen(); } }; function exit_fullscreen() { $('html5_video').classname=''; fs = false; active=false; $('video_control').classname=''; if (document.exitfullscreen) { document.exitfullscreen(); } else if (document.webkitcancelfullscreen) { document.webkitcancelfullscreen(); } else if (document.mozcancelfullscreen) { document.mozcancelfullscreen(); } } function toggle_fullscreen() { $('html5_video').classname='video_fs'; fs = true; $('video_control').classname='fullscreen'; var elem=$('html5_video'); if (elem.msrequestfullscreen) { elem.msrequestfullscreen(); } else if (elem.mozrequestfullscreen) { elem.mozrequestfullscreen(); } else if (elem.webkitrequestfullscreen) { elem.webkitrequestfullscreen(); } } function updatebuffered() { var v = $('html5_video'); var r = v.buffered; if (r) { for (var i=0; i html
00:00/33:44

css
@charset utf-8;#wrap_html5_video { padding: 10px; width: 360px;}#vol_bar,#video_bar,#vol_value { height: 9px; background-color: #999999;}#vol_bar { width: 100px; cursor: pointer;}#vol_value { background-color: #179df7; width: 50%;}#html5_video { display: block; border: 1px solid #c0deed;}#video_buffer_bar { background-color: #179df7; width: 0;}#video_progress_bar,#video_buffer_bar { position: absolute; height: 100%;}#video_progress_bar { background-color: #0066ff; width: 2px; left: 0;}.html5_video_pause_btn,.html5_video_play_btn { width: 40px; height: 40px; cursor: pointer;}.html5_video_play_btn { background: url(http://localhost/twitter/images/html5_video.jpg) 0 0 no-repeat;}.html5_video_play_btn:hover { background: url(http://localhost/twitter/images/html5_video.jpg) -41px 0 no-repeat;}.html5_video_pause_btn { background: url(http://localhost/twitter/images/html5_video.jpg) 0 -42px no-repeat;}.html5_video_pause_btn:hover { background: url(http://localhost/twitter/images/html5_video.jpg) -41px -42px no-repeat;}#play_control a,#vol_bar { vertical-align: middle;}#html5_video_fullscreen { width: 25px; background: url(http://localhost/twitter/images/html5_video.jpg) 0 -310px no-repeat; height: 18px;}#play_control #html5_video_time { font-size: 14px;}#play_control li,#play_control ul { font-size: 0;}#play_control li:last-child { position: absolute; right: 0;}.html5_video_mute1 { background: url(http://localhost/twitter/images/html5_video.jpg) no-repeat scroll -79px -170px rgba(0, 0, 0, 0);}.html5_video_mute { background: url(http://localhost/twitter/images/html5_video.jpg) no-repeat scroll 0 -170px rgba(0, 0, 0, 0);}#mute_icon { cursor: pointer; display: inline-block; height: 15px; width: 18px;}.html5_video_mute:hover { background: url(http://localhost/twitter/images/html5_video.jpg) -19px -170px no-repeat;}#play_control li { height: 40px; vertical-align: top; margin: 0 5px;}#play_control li:after { display: inline-block; width: 0; height: 100%; vertical-align: middle; content: '';}#play_control,#video_bar,#vol_bar { position: relative;}body .fullscreen { position: fixed; left: 0; bottom: 0; width: 100%; overflow: hidden; z-index: 2147483647; background-color: #fff;}video::-webkit-media-controls { display: none !important;}