H5新特性：video與audio的使用

時間 2019-12-09

標籤 h5 特性 video audio 使用简体版

原文原文鏈接

HTML5 DOM 爲 <audio> 和 <video> 元素提供了方法、屬性和事件。javascript

這些方法、屬性和事件容許您使用 JavaScript 來操做 <audio> 和 <video> 元素。html

·首先帶你們熟悉一下video標籤的屬性方法，根據屬性方法作一個小demo，html5

HTML5支持的視頻格式：java
- Ogg
  - 帶有Theora視頻編碼+Vorbis音頻編碼的Ogg文件
  - 支持的瀏覽器:F、C、O
- MEPG4
  - 帶有H.264視頻編碼+AAC音頻編碼的MPEG4文件
  - 支持的瀏覽器: S、C
- WebM
  - 帶有VP8視頻編碼+Vorbis音頻編碼的WebM格式
  - 支持的瀏覽器: I、F、C、O
  - 劣勢：視頻少、轉碼器幾乎沒有，很差轉碼
想要video能自動填充慢父div的大小，只要給video標籤加上style="width= 100%; height=100%; object-fit: fill"便可web

指定一種視頻格式，不能播就提示
<video id="media" src="examp.mp4" width="500" poster="examp1.jpg" >您的瀏覽器不支持video</video>

給定多種視頻格式，瀏覽器根據自身支持程度選擇播放哪種瀏覽器

注意：多個source標籤，瀏覽器會從第一個開始識別，若是第一個不被識別，則會繼續識別第二個；若是第一個識別成功，則會直接播放第一種格式視頻ide

 <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 設置播放器初始默認顯示圖片oop

     canPlayType() 檢測瀏覽器是否能播放指定的音頻/視頻類型。
    play()          開始播放音頻/視頻。
     pause()        暫停當前播放的音頻/視頻。post

    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" > &lt;&lt;倒退 </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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。