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

效果：

代码很简单

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