Web前端学习—HTML5API

• 音/视频
  HTML5 DOM为 video、audio 元素提供了方法、属性以及事件

  方法：
        play()   开始播放音/视频
        pause()    暂停当前的音/视频
        load()    重新加载音/视频
  属性
       autoplay 设置在在加载完毕后是否立即播放音/视频
                 true 立即播放
                 false 不播放【默认】
       controls 设置音/视频是否显示控件(比如播放/暂停等)
           标准的音视频控件包括：
                 播放
                 暂停
                 进度条
                 音量
                 全屏切换（供视频）
                 字幕（当可用时）
                 轨道（当可用时）

               currentTime : 返回音/视频当前播放的位置（以秒计时）
               volume : 返回音/视频的当前音量（取值为0~1） 0 静音，1 默认最高音量
               playbackRate ： 返回音/视频的当前播放速度。 1.0 正常速度【默认】，0.5 半速，2.0 倍速
               duration 返回音/视频的总长度（以秒计）
               paused 返回视频是否暂停，如果是，返回true，否则返回false

<script>
    window.onload = function(){
   
      var btnDiv = document.getElementById('btn-div');
      var video = document.getElementsByTagName('video')[0];
      //1.事件代理
      btnDiv.onclick = function(event){
   
        var text = event.target.innerText;
        if(text == '播放'){
   
            video.play();
        }
        if(text == '暂停'){
   
          video.pause();
        }
        if(text == '刷新'){
   
          video.load();
        }
        if(text == '快进'){
   
          // currentTime  当前正在播放的时间位置
          video.currentTime+=5;
        }
        if(text == '快退'){
   
          video.currentTime-=5; 
        }
        if(text == '快倍速'){
   
          // playbackRate  当前播放速度
          video.playbackRate = 1.5;
        }
        if(text == '慢倍速'){
   
          video.playbackRate = 0.5;
        }
      }
    
      //2.通过上下键操控音量 volume，左右键操控快进退currentTime
      document.onkeydown = function(event){
   
        var keydown = event.keyCode;  //获取按键的Unicode码
        // 上下  左右
        if(keydown == 38){
   
          if(video.volume+0.2>1)
            video.volume = 1;
          else video.volume+=0.2;
        }
        if(keydown == 40){
   
          if(video.volume-0.2<0)
            video.volume = 0
          else video.volume-=0.2;
        }
        if(keydown == 37){
   
          video.currentTime-=5;
        }
        if(keydown == 39){
   
          video.currentTime+=5;
        }
      }
      
      // 当播放和暂停放在同一个按钮上
      // 根据按钮的text内容值判断是否播放
      var toggleBtn = document.getElementById('toggle');
      toggleBtn.onclick = function(){
   
        if(this.innerText == '播放'){
   
          this.innerText = '暂停';
          video.play();
        }else{
   
          this.innerText = '播放';
          video.pause();
        }
      }
     
     //根据暂停状态 paused判断是否播放   暂停 true,播放 false
      var toggleBtn2 = document.getElementById('toggle2');
      toggleBtn2 .onclick = function(){
   
        // paused  是否为暂停状态
        // console.log(video.paused)
        if(video