h5中的video与audio

·首先带大家熟悉一下video标签的属性方法，根据属性方法做一个小demo，

• HTML5支持的视频格式：

  • Ogg
    • 带有Theora视频编码+Ogg文件
    • 支持的浏览器:F、O
  • MEPG4 
    • 带有H.264视频编码+MPEG4文件
    • 支持的浏览器: S、WebM 
      • 带有VP8视频编码+WebM格式
      • 支持的浏览器: I、C、想要video能自动填充慢父div的大小，只要给style="width= 100%; height=100%; object-fit: fill"即可

      video id="media" src="examp.mp4" width="500" poster="examp1.jpg" >您的浏览器不支持video</video>

    给定多种视频格式，浏览器根据自身支持程度选择播放哪一种

           source标签，浏览器会从第一个开始识别，如果第一个不被识别，则会继续识别第二个；如果第一个识别成功，则会直接播放第一种格式视频

      <video controls = “controls”>
    
       <source src=”1.mp4” type=”video/mp4” />  //src属性写到source标签中，要指定视频的type类型，例如MP4的即为type=“video/mp4”
    
       <source src = “2.ogg” type=”video/ogg” />  //ogg格式
    
       <source src=”3.webm” type=”video/webm” />   //webm格式
    
    </video>

    controls       是否显示播放控件
        autoplay       是否打开浏览器后自动播放
        width          设置播放器的宽度
        height         设置播放器的高度
        loop           设置视频是否循环播放
        preload        设置是否等加载完再播放
        src    url     设置要播放视频的url地址
        poster  imgurl 设置播放器初始默认显示图片

    canPlayType()   检测浏览器是否能播放指定的音频/视频类型。
         play()          开始播放音频/视频。
         pause()         暂停当前播放的音频/视频。

    playbackRate    设置或返回音频/视频播放的速度。 
         currentTime     设置或返回音频/视频中的当前播放位置（以秒计）。
         duration        返回当前音频/视频的长度（以秒计）。
         loadedmetadata：当指定的音频/视频的元数据已加载时，会发生 loadedmetadata事件。
         timeupdate:      时间改变时触发

    muted       设置或返回音频/视频是否静音。
         volume       设置或返回音频/视频的音量

  <!DOCTYPE html>
  <html>
      <head>
          <meta charset="UTF-8">
          <title></title>
      </head>
      <body>
  
          视频地址：<input type="text" id="videoUrl" value="http://115.231.144.52/12/v/w/m/y/vwmypxnxothnduooudlozlddkekrrs/hc.yinyuetai.com/E771014D8879E8AA0ED2CBC807F1C2CE.flv?sc=f1cc344f8e1ff11a"/>
          <button  onclick="getVideo()">load</button><br />
                 <video id="video" width="500" height="400" controls autoplay loop preload poster="img/1.jpg"></video><br />
  
          <button onclick="play()">播放/暂停</button>
          <button id="mute">静音</button>
          <button id="volUp">++</button>
          <button id="volDown">--</button>
          <button id="slower">减慢速率</button>
          <button id="normal">恢复速率</button>
          <button id="faster">加快速率</button>
          <br />
          <button id="reset" >复位</button>
          <button id="bwd" > <<倒退 </button>
          <button id="fwd" >快进>></button>
          <br />
  
                       视频长度: <span id="vLength"></span> <br />
                       当前时间: <span id="curTime" ></span><br />
                       持续时间: <span id="vRemaining" ></span>
  
      </body>
      <script type="text/javascript">
      /*加载视频*/
      var video=document.getElementById("video");
      function getVideo(){
          var videoUrl=document.getElementById("videoUrl").value;
          if(videoUrl!=""){
              video.src=videoUrl;
              video.load();
          }
      }
                  /*播放*/
      if(video.canPlayType){
          function play(){
              if(video.paused){
                  video.play();
              }else{
                  video.pause();
              }
          }
      }
           /*静音*/
                    document.getElementById("mute").addEventListener("click",function(){
          if(video.muted){
              video.muted=false;
          }else{
              video.muted=true;
             }
          });
  
          /*音量*/
          function setVol(value){
              var vol=video.volume;
              vol+=value;
              if(vol>=0&&vol<=1){
              video.volume=vol;
              }else{
                  video.volume=(vol<0)?0:1;
              }
          }
          document.getElementById("volUp").addEventListener("click",function(){
              setVol(.1);
          });
          document.getElementById("volDown").addEventListener("click",function(){
              setVol(-.1);
          });
          /*减小速率加大速率*/
  
          document.getElementById("slower").addEventListener("click",function(){
              video.playbackRate-=.25;
          });
          document.getElementById("faster").addEventListener("click",function(){
              video.playbackRate+=.25;
          });
          document.getElementById("normal").addEventListener("click",function(){
              video.playbackRate=1;
          });
  
            /*快进倒退复位*/
          function setTime(a){
              if(a==0){
                  video.currentTime=a;
              }else{
                  video.currentTime+=a;
              }
          }
          document.getElementById("reset").addEventListener("click",function(){
              setTime(0);
          });
          document.getElementById("fwd").addEventListener("click",function(){
              setTime(10);
          });
          document.getElementById("bwd").addEventListener("click",function(){
              setTime(-10);
          });
              /*视频长度*/
            video.addEventListener("loadedmetadata", function () {
              vLength = video.duration.toFixed(1);
              document.getElementById("vLength").textContent = vLength;
            });
             /*当前时间和持续时间*/
            video.addEventListener("timeupdate", function () {
              var currentTime= video.currentTime;
              document.getElementById("curTime").textContent = currentTime.toFixed(1);
              document.getElementById("vRemaining").textContent = (vLength - currentTime).toFixed(1);
            });
      </script>
  </html>