javascript實現簡單的html5視頻播放器

 　　網頁視頻音頻播放器大家並不陌生，在IE中我們可以運行ActiveX來嵌入微軟的Media Player或者其他的本地播放器，當然可能大部分我們都是使用Flash來制作播放器。在HTML5發展迅速的今天，讓我們嘗試用HTML5來制作網頁播放器吧，畢竟無論是PC還是移動設備，HTML5是未來的趨勢

　　效果：

　　代碼很簡單

　　js

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 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

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15