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

效果：

代码很简单

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<r.length; i++) { var start = r.start(i); var end = r.end(i); } $('video_buffer_bar').style.width=end/$('html5_video').duration*100+'%'; } } setInterval(updateBuffered,500); function b(){ if(active){ $('video_control').style.display='none'; active=false; console.log(active); } } avalon.bind($('html5_video'),'mousemove',function(e){ if(fs){ clearTimeout(inactivityTimeout); active=true; $('video_control').style.display='block'; inactivityTimeout = setTimeout(b, 5000); } });});

html

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;}

相关文章

最新文章

热门文章

猜你喜欢