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的更多相关文章

在ios中微信video和audio无法自动播放解决方案
WeixinJSBridgeReady页面初始化的时候会执行 document.addEventListener("WeixinJSBridgeReady", function ( ...
html5中的video标签和audio标签
不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
h5中的audio音频标签与对应的dom对象
HTML5中提供了一个<audio>标签,同时也提供了一个Audio对象给JavaScript去操作,这个对象属于HTML的DOM对象. H5中的<audio>标签此标签是H ...
<video>和<audio>标签，对视频和音频的支持
H5新增了<video>和<audio>标签,提供对视频和音频的支持 <audio>的属性与<video>属性相同 <video> vide ...
ffmpeg 频中分离 video audio 截取片断
1.获取视频的信息 ffmpeg -i video.avi 2,将图片序列分解合成视频 ffmpeg -i src.mpg image%d.jpg ffmpeg -f image2 -i ...
HTML5 学习07——Video(视频)Audio(音频)
<video> 元素:提供了播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...
html5新媒体播放器标签video、audio 与embed、object
html5里的一些新的标签,看到里面object.embed.video.audio都可以添加视频或音频文件 embed是针对非IE的浏览器的媒体播放器 video是html5出的一种新标准,但并不是 ...
范仁义html+css课程---9、video、audio、canvas和svg元素略讲
范仁义html+css课程---9.video.audio.canvas和svg元素略讲一.总结一句话总结: video:HTML5视频标签. audio:html5音频标签. canvas:绘制 ...
swift禁用webView对H5中数字，链接，日期，地址，电话号码做解析
showWebView.dataDetectorTypes = .None //swift禁用webView对H5中数字,链接,日期,地址,电话号码做解析其UIDataDetectorTypes属性 ...

随机推荐

C. Destroying Array 并查集，逆向思维
用并查集维护线段,从后往前枚举没个删除的位置id[i] 那么,现在删除了这个,就是没有了的,但是上一个id[i + 1]就是还没删除的. 然后现在进行合并 int left = id[i + 1];( ...
HDU 5734 A - Acperience
http://acm.hdu.edu.cn/showproblem.php?pid=5734 Problem Description Deep neural networks (DNN) have s ...
Java集合——集合框架Set接口
1.Set接口一个不包含重复元素的collecyion.更确切的讲,set不包含满足e1.equals(e2)的元素e1和e2,并且最多包含一个null元素. 2.HashSet 类实现Set接口, ...
lazy load的一些网址
http://www.gayadesign.com/scripts/queryLoader/ http://www.oschina.net/p/queryloader http://www.cnblo ...
Zookeeper问题汇总
1. 遗留问题 a). zookeeper集群如何保证请求的均匀分布? 2. ZK概念澄清 2.1 ZK节点类型 CreateMode.PERSISTENT //持久节点,该节点客户端断开后不会删除 ...
自定义列表dl
语法格式 <dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> ... ...
HDU 1305 Immediate Decodability 可直接解码吗？
题意:一个码如果是另一个码的前缀,则 is not immediately decodable,不可直接解码,也就是给一串二进制数字给你,你不能对其解码,因解码出来可能有多种情况. 思路:将每个码按长 ...
pat乙级1060
将数组排序后从大到小遍历,设置一个递增的变量t,当v[i] > t的时候,说明有t个数大于t,最后一个满足v[i] > t的t即为所求结果. #include <iostream&g ...
在编辑Spring的配置文件时的自动提示
打开MyEclipse—>Windows--->referenecs——>General,选择下面的Keys,这就是快捷键的设置,可将Content Assist的快捷键改为 A ...
iOS中的崩溃类型
http://blog.csdn.net/womendeaiwoming/article/details/44243571 OS中的崩溃类型在这里了解一下XCode用来表示各种崩溃类型的术语,补充一 ...

h5中的video与audio

h5中的video与audio的更多相关文章

随机推荐

热门专题