zoukankan html css js c++ java

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>

查看全文

相关阅读:
Codeforces 1265A Beautiful String
1039 Course List for Student (25)
1038 Recover the Smallest Number (30)
1037 Magic Coupon (25)
1024 Palindromic Number (25)
1051 Pop Sequence (25)
1019 General Palindromic Number (20)
1031 Hello World for U (20)
1012 The Best Rank (25)
1011 World Cup Betting (20)

原文地址：https://www.cnblogs.com/duanyue/p/7117389.html