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);
    }
  });
});
define("htm