h5中的video与audio

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

    • HTML5支持的视频格式:

      • Ogg

        • 带有Theora视频编码+Ogg文件
        • 支持的浏览器:FO
      • MEPG4 
        • 带有H.264视频编码+MPEG4文件
        • 支持的浏览器: SWebM 
            • 带有VP8视频编码+WebM格式
            • 支持的浏览器: IC想要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>
      
时间: 2024-10-15 20:27:39

h5中的video与audio的相关文章

ffmpeg 频中分离 video audio 截取片断

1.获取视频的信息 ffmpeg -i video.avi 2,将图片序列分解合成视频 ffmpeg -i src.mpg image%d.jpg ffmpeg -f image2 -i image%d.jpg dst.mpg 合成注意事项: 假设图片序列是3位数,用image%03d 假设jpg文件名称字是乱的用.以下命令规整一下 x=1; for i in *jpg; do counter=$(printf %03d $x); mv  "$i" image"$counte

Html5之高级-4 HTML5视频处理(H5中播放视频、编程实现视频播放器)

一.在 HTML5 中播放视频 在 HTML5 中播放视频 - HTML5 中提到最多的是视频处理,视频也是互联网中的重要应用.在HTML5中,增加了一个元素,以便在HTML文档中插入和播放视频,这个元素就是video元素 - video元素提供了播放.暂停和音量控件来控制视频,也提供了width和height属性控制视频的尺寸.如设置的高度和宽度等. - 使用video元素至少要提供两种视频格式的文件: OGG和MP4 - OGG: 包含Theora 视频和 Vorbis 音频解码器 - MP

Html5之高级-5 HTML5音频处理(在H5中播放音频、编程实现音频播放器)

一.在HTML5中播放音频 audio 元素 - audio元素可以实现在HTML页面中嵌入音频内容,该元素的属性可以设置是否自动播放.预加载及循环播放等 - audio元素提供了播放.暂停和音量控件来控制音频 - 使用audio元素提供三种音频格式的文件:MP3.Ogg.Wav - MP3: 采用mpeg音频解码器 - Ogg: 采用ogg音频解码器 - Wav: 采用wav音频解码器 - 语法结构 audio 属性 - audio 元素支持以下属性 - src: 指定播放文件的URL,可通过

html5新媒体播放器标签video、audio 与embed、object

html5里的一些新的标签,看到里面object.embed.video.audio都可以添加视频或音频文件 embed是针对非IE的浏览器的媒体播放器 video是html5出的一种新标准,但并不是所有的浏览器都支持.video虽然号称可以支持三种媒体类型,但常用的只有mp4. 像object,和embed是都可以用来播放视频和音频,而且他们展示效果基本上一样的, 1. video.audio可以看我的另一篇文章https://www.cnblogs.com/jing-tian/p/10930

在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

video 与 audio

Play方法:使用play方法来播放媒体,自动将元素的paused属性的值变为false.Pause方法:使用pause方法来暂停播放,自动将元素的paused属性的值变为true.Load方法:使用load方法来重新载入媒体进行播放,自动将元素的playbackRate属性值变为defaultPlaybackRate 属性的值,自动将元素的error值变为null.canPlayType方法:使用canPlayType方法来测试浏览器是否支持指定的媒体类型video 和 audio 与sour

从web图片裁剪出发:了解H5中的canvas

本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 重说三,好了,现在进入正文.在上一回<从web图片裁剪出发:了解H5中的blob>中我解释了图片在浏览器中以怎样的形式留存,并且在最后一个example中演示了选择图片.预览最后提交的过程.然而这个预览并没有起到什么卵用,因为只能预览不能处理,原图片还是原图片,预览变得可有可无.这一篇我们就在预览这一步里做点手脚,加

swift禁用webView对H5中数字,链接,日期,地址,电话号码做解析

showWebView.dataDetectorTypes = .None //swift禁用webView对H5中数字,链接,日期,地址,电话号码做解析 其UIDataDetectorTypes属性: static var PhoneNumber: UIDataDetectorTypes { get } // Phone number detection static var Link: UIDataDetectorTypes { get } // URL detection static v

解决ie8下,不支持video、audio的问题

video.audio都是html5的属性,不支持低版本的ie8,个人在用的时候,遇到了这个问题,下面是自己的解决方案 <audio controls="controls" preload="none" src="@SiteUrls.Instance().AttachmentAudioUrl(Model)"> <embed src="@SiteUrls.Instance().AttachmentAudioUrl(Mod