超简单的html5视频播放器

浏览数：53 / 时间：2015年06月09日

效果：

代码很简单

  1 define("html5_video_player", [ ‘../avalon-min‘], function(avalon) {
  2     function formatTime(seconds) {
  3         var seconds = Math.round(seconds);
  4         var minutes = Math.floor(seconds / 60);
  5         seconds = Math.floor(seconds % 60);
  6         minutes = (minutes >= 10) ? minutes : "0" + minutes;
  7         seconds = (seconds >= 10) ? seconds : "0" + seconds;
  8         return minutes + ":" + seconds;
  9     }
 10     var playing=false,mute=false,vol=50,fs=false,active=false,inactivityTimeout=timer=null;
 11     avalon.bind($(‘control_btn‘),‘click‘,function(){
 12         if(!playing){
 13             $(‘html5_video‘).play();
 14             $(‘control_btn‘).className=‘html5_video_pause_btn inline-block‘;
 15             playing=true;
 16         }else{
 17             $(‘html5_video‘).pause();
 18             $(‘control_btn‘).className=‘html5_video_play_btn inline-block‘;
 19             playing=false;
 20         }
 21     });
 22     avalon.bind($(‘video_bar‘),‘click‘,function(e){
 23         var a=(e.clientX-$(‘video_bar‘).offsetLeft)/$(‘video_bar‘).offsetWidth;
 24         $(‘html5_video‘).currentTime =a.toFixed(2)*$(‘html5_video‘).duration;
 25     });
 26     avalon.bind($(‘vol_bar‘),‘click‘,function(e){
 27         var a=(e.clientX-$(‘vol_bar‘).offsetLeft-8)/$(‘vol_bar‘).offsetWidth;
 28         vol=$(‘html5_video‘).volume =a;
 29         $(‘vol_value‘).style.width=a*100+‘%‘;
 30     });
 31     avalon.bind($(‘mute_icon‘),‘click‘,function(){
 32         if(!mute){
 33             $(‘html5_video‘).volume=0;
 34             $(‘mute_icon‘).className=‘html5_video_mute1‘;
 35             mute=true;
 36         }else{
 37             $(‘html5_video‘).volume=vol;
 38             $(‘mute_icon‘).className=‘html5_video_mute‘;
 39             mute=false;
 40         }
 41     });
 42     avalon.bind($(‘html5_video‘),‘loadedmetadata‘,function(){
 43         $(‘html5_video_duration‘).innerHTML=formatTime($(‘html5_video‘).duration);
 44         $(‘html5_video‘).volume=0;
 45     });
 46     avalon.bind($(‘html5_video‘),‘timeupdate‘,function(){
 47         $(‘html5_play_time‘).innerHTML=formatTime($(‘html5_video‘).currentTime);
 48         $(‘video_progress_bar‘).style.left=$(‘html5_video‘).currentTime/$(‘html5_video‘).duration*100+‘%‘;
 49     });
 50     avalon.bind($(‘html5_video_fullscreen‘),‘click‘,function(e){
 51         if(!fs){
 52             toggle_fullscreen();
 53         }else{
 54             exit_fullscreen();
 55         }
 56     });
 57     document.onmozfullscreenchange = function() {
 58         if ($(‘html5_video‘).clientWidth +2!= document.documentElement.clientWidth) {
 59             exit_fullscreen();
 60         }
 61     };
 62     document.onwebkitfullscreenchange = function() {
 63         if ($(‘html5_video‘).clientWidth!= document.documentElement.clientWidth) {
 64             exit_fullscreen();
 65         }
 66     };
 67     function exit_fullscreen() {
 68         $(‘html5_video‘).className=‘‘;
 69         fs = false;
 70         active=false;
 71         $(‘video_control‘).className=‘‘;
 72         if (document.exitFullscreen) {
 73             document.exitFullscreen();
 74         } else if (document.webkitCancelFullScreen) {
 75             document.webkitCancelFullScreen();
 76         } else if (document.mozCancelFullScreen) {
 77             document.mozCancelFullScreen();
 78         }
 79     }
 80     function toggle_fullscreen() {
 81         $(‘html5_video‘).className=‘video_fs‘;
 82         fs = true;
 83         $(‘video_control‘).className=‘fullscreen‘;
 84         var elem=$(‘html5_video‘);
 85         if (elem.msRequestFullscreen) {
 86             elem.msRequestFullscreen();
 87         } else if (elem.mozRequestFullScreen) {
 88             elem.mozRequestFullScreen();
 89         } else if (elem.webkitRequestFullscreen) {
 90             elem.webkitRequestFullscreen();
 91         }
 92     }
 93     function updateBuffered() {
 94           var v = $(‘html5_video‘);
 95           var r = v.buffered;
 96           if (r) {
 97             for (var i=0; i<r.length; i++) {
 98               var start = r.start(i);
 99               var end = r.end(i);
100             }
101             $(‘video_buffer_bar‘).style.width=end/$(‘html5_video‘).duration*100+‘%‘;
102           }
103         }
104     setInterval(updateBuffered,500);
105     function b(){
106         if(active){
107             $(‘video_control‘).style.display=‘none‘;
108             active=false;
109             console.log(active);
110         }
111     }
112     avalon.bind($(‘html5_video‘),‘mousemove‘,function(e){
113         if(fs){
114             clearTimeout(inactivityTimeout);
115             active=true;
116             $(‘video_control‘).style.display=‘block‘;
117             inactivityTimeout = setTimeout(b, 5000);
118         }
119     });
120 });

html

 1 <link type="text/css"
 2     href="http://localhost/twitter/css/html5_video_player.css"
 3     rel="stylesheet" />
 4 <div id=‘wrap_html5_video‘>
 5     <div id=‘html5_video_area‘>
 6         <video id="html5_video" width="360" height="240">
 7             <source type=" video/mp4" src="http://localhost/twitter/videos/2.mp4"></source>
 8             <source type=" video/webm"
 9                 src="http://localhost/twitter/videos/2.webm"></source>
10         </video>
11     </div>
12     <div id=‘video_control‘>
13         <div id=‘video_bar‘>
14             <div id=‘video_buffer_bar‘></div>
15             <div id=‘video_progress_bar‘></div>
16         </div>
17         <div id=‘play_control‘>
18             <ul>
19                 <li class=‘inline-block‘><a
20                     class=‘html5_video_play_btn inline-block‘ id=‘control_btn‘></a></li>
21                 <li class=‘inline-block‘><a id=‘mute_icon‘
22                     class=‘html5_video_mute‘></a>
23                     <div id=‘vol_bar‘ class=‘inline-block‘>
24                         <p id=‘vol_value‘></p>
25                     </div></li>
26                 <li class=‘inline-block‘ id=‘html5_video_time‘><span
27                     id=‘html5_play_time‘>00:00</span><span>/</span><span
28                     id=‘html5_video_duration‘>33:44</span></li>
29                 <li class=‘inline-block‘><a id=‘html5_video_fullscreen‘
30                     class=‘inline-block‘></a></li>
31             </ul>
32         </div>
33         <div id=‘a‘></div>
34     </div>
35     <div id=‘buffered_log‘></div>
36 </div>
37 <script type="text/javascript">
38     require(‘html5/html5_video_player‘);
39 </script>

css

  1 @CHARSET "UTF-8";
  2 
  3 #wrap_html5_video {
  4     padding: 10px;
  5     width: 360px;
  6 }
  7 
  8 #vol_bar,#video_bar,#vol_value {
  9     height: 9px;
 10     background-color: #999999;
 11 }
 12 
 13 #vol_bar {
 14     width: 100px;
 15     cursor: pointer;
 16 }
 17 
 18 #vol_value {
 19     background-color: #179df7;
 20     width: 50%;
 21 }
 22 
 23 #html5_video {
 24     display: block;
 25     border: 1px solid #c0deed;
 26 }
 27 
 28 #video_buffer_bar {
 29     background-color: #179DF7;
 30     width: 0;
 31 }
 32 
 33 #video_progress_bar,#video_buffer_bar {
 34     position: absolute;
 35     height: 100%;
 36 }
 37 
 38 #video_progress_bar {
 39     background-color: #0066FF;
 40     width: 2px;
 41     left: 0;
 42 }
 43 
 44 .html5_video_pause_btn,.html5_video_play_btn {
 45     width: 40px;
 46     height: 40px;
 47     cursor: pointer;
 48 }
 49 
 50 .html5_video_play_btn {
 51     background: url("http://localhost/twitter/images/html5_video.jpg") 0 0
 52         no-repeat;
 53 }
 54 
 55 .html5_video_play_btn:hover {
 56     background: url("http://localhost/twitter/images/html5_video.jpg") -41px
 57         0 no-repeat;
 58 }
 59 
 60 .html5_video_pause_btn {
 61     background: url("http://localhost/twitter/images/html5_video.jpg") 0
 62         -42px no-repeat;
 63 }
 64 
 65 .html5_video_pause_btn:hover {
 66     background: url("http://localhost/twitter/images/html5_video.jpg") -41px
 67         -42px no-repeat;
 68 }
 69 
 70 #play_control a,#vol_bar {
 71     vertical-align: middle;
 72 }
 73 
 74 #html5_video_fullscreen {
 75     width: 25px;
 76     background: url("http://localhost/twitter/images/html5_video.jpg") 0
 77         -310px no-repeat;
 78     height: 18px;
 79 }
 80 
 81 #play_control #html5_video_time {
 82     font-size: 14px;
 83 }
 84 
 85 #play_control li,#play_control ul {
 86     font-size: 0;
 87 }
 88 
 89 #play_control li:last-child {
 90     position: absolute;
 91     right: 0;
 92 }
 93 
 94 .html5_video_mute1 {
 95     background: url("http://localhost/twitter/images/html5_video.jpg")
 96         no-repeat scroll -79px -170px rgba(0, 0, 0, 0);
 97 }
 98 
 99 .html5_video_mute {
100     background: url("http://localhost/twitter/images/html5_video.jpg")
101         no-repeat scroll 0 -170px rgba(0, 0, 0, 0);
102 }
103 
104 #mute_icon {
105     cursor: pointer;
106     display: inline-block;
107     height: 15px;
108     width: 18px;
109 }
110 
111 .html5_video_mute:hover {
112     background: url("http://localhost/twitter/images/html5_video.jpg") -19px
113         -170px no-repeat;
114 }
115 
116 #play_control li {
117     height: 40px;
118     vertical-align: top;
119     margin: 0 5px;
120 }
121 
122 #play_control li:after {
123     display: inline-block;
124     width: 0;
125     height: 100%;
126     vertical-align: middle;
127     content: ‘‘;
128 }
129 
130 #play_control,#video_bar,#vol_bar {
131     position: relative;
132 }
133 
134 body .fullscreen {
135     position: fixed;
136     left: 0;
137     bottom: 0;
138     width: 100%;
139     overflow: hidden;
140     z-index: 2147483647;
141     background-color: #fff;
142 }
143 
144 video::-webkit-media-controls {
145     display: none !important;
146 }