H5新特性：video与audio的使用

HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件。

这些方法、属性和事件允许您使用 JavaScript 来操作 <audio> 和 <video> 元素。

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

HTML5支持的视频格式：
- 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"即可

指定一种视频格式，不能播就提示
<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="" height="" 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>=&&vol<=){

            video.volume=vol;

            }else{

                video.volume=(vol<)?:;

            }

        }

        document.getElementById("volUp").addEventListener("click",function(){

            setVol(.);

        });

        document.getElementById("volDown").addEventListener("click",function(){

            setVol(-.);

        });

        /*减小速率加大速率*/

        document.getElementById("slower").addEventListener("click",function(){

            video.playbackRate-=.;

        });

        document.getElementById("faster").addEventListener("click",function(){

            video.playbackRate+=.;

        });

        document.getElementById("normal").addEventListener("click",function(){

            video.playbackRate=;

        });

          /*快进倒退复位*/

        function setTime(a){

            if(a==){

                video.currentTime=a;

            }else{

                video.currentTime+=a;

            }

        }

        document.getElementById("reset").addEventListener("click",function(){

            setTime();

        });

        document.getElementById("fwd").addEventListener("click",function(){

            setTime();

        });

        document.getElementById("bwd").addEventListener("click",function(){

            setTime(-);

        });

            /*视频长度*/

          video.addEventListener("loadedmetadata", function () {

            vLength = video.duration.toFixed();

            document.getElementById("vLength").textContent = vLength;

          });

           /*当前时间和持续时间*/

          video.addEventListener("timeupdate", function () {

            var currentTime= video.currentTime;

            document.getElementById("curTime").textContent = currentTime.toFixed();

            document.getElementById("vRemaining").textContent = (vLength - currentTime).toFixed();

          });

    </script>

</html>

巴特西

H5新特性：video与audio的使用

最新文章

热门文章