h5中的video与audio

Posted 2020-09-26 段跃

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5中的video与audio相关的知识，希望对你有一定的参考价值。

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

HTML5支持的视频格式：

Ogg
- 带有Theora视频编码+Ogg文件
- 支持的浏览器:F、O
MEPG4
- 带有H.264视频编码+MPEG4文件
- 支持的浏览器: S、WebM
  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>

以上是关于h5中的video与audio的主要内容，如果未能解决你的问题，请参考以下文章

h5-audio/video标签

H5新特性之video audio

H5学习系列之Audio和Video

H5新属性audio音频和 video视频的控制

video,audio的使用细则

video元素和audio元素