1   <video loop id="video" preload style="width: 500px;">
  2     <!--音源-->
  3     <source src="img/九九八十一.webm">
  4     <span>您的浏览器不支持video标签，请换个浏览器试一下吧</span>
  5   </video>
  6   <div>
  7     <progress id="progress" value="0" max="100" style="width: 450px"></progress>
  8     <span>00:00</span>/<span>01:31</span>
  9   </div>
 10    <div>
 11      <button id="btn_play">播放</button>
 12      <button id="btn_pause">暂停</button>
 13      <button id="btn_muted">静音</button>
 14      <button id="btn_fullScreen">全屏</button>
 15      <input type="range" value='1' name="range" id="btn_volume" min="0" max="1" step='0.1'>
 16      <button id="btn_go">加速</button>
 17      <button id="btn_back">减速</button>
 18      <button id="go_five">快进5s</button>
 19      <button id="back_five">后退5s</button>
 20    </div>
 21
 22    <script>
 23      var btn_play = document.getElementById('btn_play');
 24      var btn_pause = document.getElementById('btn_pause');
 25      var video = document.getElementById('video');
 26       //播放
 27        btn_play.disabled = false;
 28       btn_play.addEventListener('click', function(){
 29         video.play();
 30          this.disabled = true;
 31          btn_pause.disabled = false;
 32          // console.log(video.duration);
 33       });
 34      //暂停
 35       btn_pause.disabled = true;
 36      btn_pause.addEventListener('click', function(){
 37         video.pause();
 38          this.disabled = true;
 39          btn_play.disabled = false;
 40       });
 41      //静音
 42     var btn_muted = document.getElementById('btn_muted');
 43     btn_muted.addEventListener('click', function(){
 44       video.muted = !video.muted;
 45        this.innerHTML = video.muted? '取消静音':'静音'
 46       });
 47       //全屏
 48      var btn_fullScreen = document.getElementById('btn_fullScreen');
 49      btn_fullScreen.addEventListener('click', function(){
 50       fullScreen(video);
 51      });
 52      //音量控制
 53      var btn_volume = document.getElementById('btn_volume');
 54      btn_volume.addEventListener('change', function(){
 55       // console.log('change');
 56       video.volume = this.value;
 57      })
 58      //加速
 59      var btn_go = document.getElementById('btn_go');
 60      btn_go.addEventListener('click', function(){
 61         video.playbackRate += 0.1;
 62         console.log(video.playbackRate)
 63      })
 64      //减速
 65      var btn_back = document.getElementById('btn_back');
 66      btn_back.addEventListener('click', function(){
 67         video.playbackRate -= 0.1;
 68         console.log(video.playbackRate)
 69      })
 70      //快进五秒
 71      var go_five = document.getElementById('go_five');
 72      go_five.addEventListener('click', function(){
 73         video.currentTime += 5;
 74      })
 75      //快退五秒
 76      var back_five = document.getElementById('back_five');
 77      back_five.addEventListener('click', function(){
 78         video.currentTime -= 5;
 79      })
 80      var i = 0;
 81      //进度条
 82       var pro = document.getElementById('progress');
 83       var span1 = document.querySelectorAll('span')[1];
 84       console.log(span1)
 85      //注册视频播放状态的事件
 86
 87      video.addEventListener('timeupdate', function(){
 88
 89      pro.value = video.currentTime/video.duration * 100;
 90
 91       var ss = Math.floor(video.currentTime/60);
 92       var mm = Math.floor(video.currentTime%60);
 93       ss = ss<10? '0' + ss:ss;
 94       mm = mm<10? '0' + mm:mm;
 95        span1.innerHTML = ss + ':' + mm;
 96      })
 97
 98      function fullScreen(ele){
 99       if(ele.mozRequestFullScreen){
100         ele.mozRequestFullScreen();//火狐浏览器
101       }else if(ele.webkitRequestFullscreen){
102         ele.webkitRequestFullscreen();//谷歌浏览器
103       }else if(ele.oRequestFullscreen){
104         ele.oRequestFullscreen(); //opera浏览器
105       }else if(ele.msRequestFullscreen){
106         ele.msRequestFullscreen();  //ie浏览器
107       }else if(ele.requestFullscreen){
108         ele.requestFullscreen();
109       }
110      }
111
112    </script>