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

<link type=\"text/css\"
  href=\"http://localhost/twitter/css/html5_video_player.css\"
  rel=\"stylesheet\" />
<div id=\'wrap_html5_video\'>
  <div id=\'html5_video_area\'>
    <video id=\"html5_video\" width=\"360\" height=\"240\">
      <source type=\" video/mp4\" src=\"http://localhost/twitter/videos/2.mp4\"></source>
      <source type=\" video/webm\"
        src=\"http://localhost/twitter/videos/2.webm\"></source>
    </video>
  </div>
  <div id=\'video_control\'>
    <div id=\'video_bar\'>
      <div id=\'video_buffer_bar\'></div>
      <div id=\'video_progress_bar\'></div>
    </div>
    <div id=\'play_control\'>
      <ul>
        <li class=\'inline-block\'><a
          class=\'html5_video_play_btn inline-block\' id=\'control_btn\'></a></li>
        <li class=\'inline-block\'><a id=\'mute_icon\'
          class=\'html5_video_mute\'></a>
          <div id=\'vol_bar\' class=\'inline-block\'>
            <p id=\'vol_value\'></p>
          </div></li>
        <li class=\'inline-block\' id=\'html5_video_time\'><span
          id=\'html5_play_time\'>00:00</span><span>/</span><span
          id=\'html5_video_duration\'>33:44</span></li>
        <li class=\'inline-block\'><a id=\'html5_video_fullscreen\'
          class=\'inline-block\'></a></li>
      </ul>
    </div>
    <div id=\'a\'></div>
  </div>
  <div id=\'buffered_log\'></div>
</div>
<script type=\"text/javascript\">
  require(\'html5/html5_video_player\');
</script>

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