HTML5 Audio/Video 标签,属性,方法,事件汇总

缺乏、安全感 2022-08-26 14:12 237阅读 0赞

### <audio> 标签属性： ###

*  src：音乐的URL
 *  preload：预加载
 *  autoplay：自动播放
 *  loop：循环播放
 *  controls：浏览器自带的控制条

Html代码

1. <audio id=”media” src=”http://www.abc.com/test.mp3″ controls></audio>

### <video> 标签属性： ###

*  src：视频的URL
 *  poster：视频封面，没有播放时显示的图片
 *  preload：预加载
 *  autoplay：自动播放
 *  loop：循环播放
 *  controls：浏览器自带的控制条
 *  width：视频宽度
 *  height：视频高度

Html代码

1. <video id=”media” src=”http://www.abc.com/test.mp4″ controls width=”400px” heigt=”400px”></video>

### 获取HTMLVideoElement和HTMLAudioElement对象 ###

Js代码

1.  //audio可以直接通过new创建对象  
2.  Media = new Audio(“http://www.abc.com/test.mp3″);  
3.  //audio和video都可以通过标签获取对象  
4.  Media = document.getElementByIdx\_x(“media”);

### Media方法和属性： ###

HTMLVideoElement 和 HTMLAudioElement 均继承自 HTMLMediaElement

Js代码

1.  //错误状态  
2.     Media.error; //null:正常  
3.     Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效  
4.    
5.  //网络状态  
6.     Media.currentSrc; //返回当前资源的URL  
7.     Media.src = value; //返回或设置当前资源的URL  
8.     Media.canPlayType(type); //是否能播放某种格式的资源  
9.     Media.networkState; //0.此元素未初始化  1.正常但没有使用网络  2.正在下载数据  3.没有找到资源  
10.    Media.load(); //重新加载src指定的资源  
11.    Media.buffered; //返回已缓冲区域，TimeRanges  
12.    Media.preload; //none:不预载 metadata:预载资源信息 auto:  
13.   
14. //准备状态  
15.    Media.readyState;    //1:HAVE\_NOTHING 2:HAVE\_METADATA 3.HAVE\_CURRENT\_DATA 4.HAVE\_FUTURE\_DATA 5.HAVE\_ENOUGH\_DATA  
16.    Media.seeking; //是否正在seeking  
17.   
18. //回放状态  
19.    Media.currentTime = value; //当前播放的位置，赋值可改变位置  
20.    Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0  
21.    Media.duration; //当前资源长度 流返回无限  
22.    Media.paused; //是否暂停  
23.    Media.defaultPlaybackRate = value;//默认的回放速度，可以设置  
24.    Media.playbackRate = value;//当前播放速度，设置后马上改变  
25.    Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文  
26.    Media.seekable; //返回可以seek的区域 TimeRanges  
27.    Media.ended; //是否结束  
28.    Media.autoPlay;  //是否自动播放  
29.    Media.loop;  //是否循环播放  
30.    Media.play();    //播放  
31.    Media.pause();   //暂停  
32.   
33. //控制  
34.    Media.controls;//是否有默认控制条  
35.    Media.volume = value; //音量  
36.    Media.muted = value; //静音  
37.   
38.    //TimeRanges(区域)对象  
39.    TimeRanges.length; //区域段数  
40.    TimeRanges.start(index) //第index段区域的开始位置  
41.    TimeRanges.end(index) //第index段区域的结束位置

### 事件： ###

Js代码

1.         eventTester = function(e)\{  
2.      Media.addEventListener(e,function()\{  
3.          console.log((new Date()).getTime(),e);  
4.      \});  
5.  \}  
6.    
7.  eventTester(“loadstart”);   //客户端开始请求数据  
8.  eventTester(“progress”);    //客户端正在请求数据  
9.  eventTester(“suspend”);     //延迟下载  
10. eventTester(“abort”);       //客户端主动终止下载（不是因为错误引起），  
11. eventTester(“error”);       //请求数据时遇到错误  
12. eventTester(“stalled”);     //网速失速  
13. eventTester(“play”);        //play()和autoplay开始播放时触发  
14. eventTester(“pause”);       //pause()触发  
15. eventTester(“loadedmetadata”);  //成功获取资源长度  
16. eventTester(“loadeddata”);  //  
17. eventTester(“waiting”);     //等待数据，并非错误  
18. eventTester(“playing”);     //开始回放  
19. eventTester(“canplay”);     //可以播放，但中途可能因为加载而暂停  
20. eventTester(“canplaythrough”); //可以播放，歌曲全部加载完毕  
21. eventTester(“seeking”);     //寻找中  
22. eventTester(“seeked”);      //寻找完毕  
23. eventTester(“timeupdate”);  //播放时间改变  
24. eventTester(“ended”);       //播放结束  
25. eventTester(“ratechange”);  //播放速率改变  
26. eventTester(“durationchange”);  //资源长度改变  
27. eventTester(“volumechange”);    //音量改变

================================

在以前，网页没有显示视频的一个标准，所以基本都要借助插件来实现视频的播放，插件过多或者插件自身问题，很容易引起浏览器的假死，造成用户体验不佳。html5  video标签的出现改变了这一局面，可以让用户在不用安装任何插件的情况下轻松的观看视频。

vedio和audio的使用技巧基本相同，本文仅以vedio作示例。先引用一段别人介绍的vedio标签

--------------------

大多数用户已经安装了Flash插件（事实上，大概95%的上网用户都装有Flash的某个版本），但HTML 5的支持者正在推动一个开放的，不需要任何插件的视频标准。这就是HTML 5的新标签<video>带来的构想，他提供了一个嵌入视频（以及与其交互）而不需要类似Flash的私有插件的方法。  
　　不幸的是，视频并非那么简单。不仅仅是浏览器需要理解<video>标签，而且需要一个必要的编码译码器来播放视频。明显的解决方法只能是HTML 5规范的缔造者们选择一个视频编码译码器，并且让每一个浏览器制造商执行。  
　　总之，这就是所推荐的打算。同时，这也是引起混乱的导火索。对于各种各样编码译码器的争论就已经很烦杂了，但更悲剧的事情是，浏览器制造商们还不能就此达成统一。苹果不愿意使用提议的Ogg Theora编码译码器，但Opera和Mozilla也不愿意支付由于他们的浏览器装载H.264编码译码器而造成的许可费用。Google同时支持两者，微软面对争论，远远的置身事外，因为他现在根本没有计划去支持HTML 5的视频元素。 面对浏览器制造商的僵持局面，HTML 5善意的独裁者Ian Hickson甩了甩他的手并说到去他妈的。所以HTML 5规范中没有特别指名或规定的视频编码解码器。”好吧，引用到这儿。 如今的情况是，微软终于陷进去了，但很悲剧的是，在IE 9中只支持H.264。同时，Googe终于在I/O大会上发布了开源的视频封装格式webM和视频编码格式VP8。Opera、Mozilla、Chrome宣布将完全支持VP8，IE宣布部分支持（需要装一个插件，但如果我没记错的话，HTML 5的一个愿景就是脱离浏览器插件，微软真是让人觉得悲剧）。 苹果决定不支持VP8，乔布斯认为VP8在质量或效率方面不如H.264，不能满足其产品的要求。另外最新消息表明VP8还有可能牵扯到专利的问题（如果真的侵犯专利的话，Opera和Firefox估计马上会无视VP8的）。 说了这么多，其实说到底就是，现在如果要在页面中使用video标签，需要考虑三种情况，支持Ogg Theora或者VP8（如果这玩意儿没出事的话）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、Chrome），都不支持的（IE6、7、8）。好吧，现在让我们从技术层面来认识HTML 5的视频，包括video标签的使用，视频对象可以用到的媒介属性和方法，以及媒介事件。

--------------------

我们来看看video标签具体是怎么使用的以及它有哪些属性和方法。

使用方法：

Your browser does not support the video tag.

</video>

各浏览器目前对html5视频格式的支持：

<table style="width:500px; float:left"> 
 <thead> 
 <tr> 
 <th align="center">浏览器 | 影音格式</th> 
 <th align="center">Ogg Theora</th> 
 <th align="center">MP4(H.264)</th> 
 <th align="center">WebM</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td align="center">Microsoft Internet Explorer9</td> 
 <td align="center">×</td> 
 <td align="center">√</td> 
 <td align="center">×</td> 
 </tr> 
 <tr> 
 <td align="center">Mozilla Firefox5+</td> 
 <td align="center">√</td> 
 <td align="center">×</td> 
 <td align="center">√</td> 
 </tr> 
 <tr> 
 <td align="center">Google Chrome13+</td> 
 <td align="center">√</td> 
 <td align="center">√</td> 
 <td align="center">√</td> 
 </tr> 
 <tr> 
 <td align="center">Apple Safari5+</td> 
 <td align="center">×</td> 
 <td align="center">√</td> 
 <td align="center">×</td> 
 </tr> 
 <tr> 
 <td align="center">Opera11+</td> 
 <td align="center">√</td> 
 <td align="center">×</td> 
 <td align="center">√</td> 
 </tr> 
 </tbody> 
</table>

属性列表：

<table style="width:98%"> 
 <tbody> 
 <tr style="background-color:#5e6d64"> 
 <td> 属性 </td> 
 <td> 值 </td> 
 <td> 描述 </td> 
 </tr> 
 <tr> 
 <td>autoplay</td> 
 <td>autoplay</td> 
 <td>如果出现该属性，则视频在就绪后马上播放。默认为false</td> 
 </tr> 
 <tr> 
 <td>controls</td> 
 <td>controls</td> 
 <td>如果出现该属性，则向用户显示控件，比如播放按钮。这些控件是由浏览器来提供的，样式也可能因为不同浏览器而不一样</td> 
 </tr> 
 <tr> 
 <td>height</td> 
 <td>pixels</td> 
 <td>设置视频播放器的高度。</td> 
 </tr> 
 <tr> 
 <td>loop</td> 
 <td>loop</td> 
 <td>如果出现该属性，则当媒介文件完成播放后再次开始播放。</td> 
 </tr> 
 <tr> 
 <td>preload</td> 
 <td>none、metadata、auto</td> 
 <td> 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。 
 <ul> 
 <li> auto - 当页面加载后载入整个视频 </li> 
 <li> meta - 部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）&nbsp; </li> 
 <li> none - 不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求 </li> 
 </ul> </td> 
 </tr> 
 <tr> 
 <td>src</td> 
 <td>url</td> 
 <td>要播放的视频的URL。</td> 
 </tr> 
 <tr> 
 <td>&nbsp;poster</td> 
 <td>&nbsp;url</td> 
 <td>&nbsp;预览图</td> 
 </tr> 
 </tbody> 
</table>

** 媒介属性 **

**　　**一般用于js操作

<table style="width:98%"> 
 <tbody> 
 <tr style="background-color:#5e6d64"> 
 <td style="width:100px">属性</td> 
 <td style="width:100px">可读状态</td> 
 <td>描述</td> 
 </tr> 
 <tr> 
 <td>error</td> 
 <td>只读</td> 
 <td> 使用media.error返回一个MediaError对象表明当前的错误状态，如果没有出错，返回null，共有4个可能值。 
 <ul> 
 <li>MEDIA_ERR_ABORTED（数字值为1）：媒体资源获取异常；</li> 
 <li>MEDIA_ERR_NETWORK（数字值为2）：网络错误；</li> 
 <li>MEDIA_ERR_DECODE（数字值为3）：媒体解码错误；</li> 
 <li>MEDIA_ERR_SRC_NOT_SUPPORTED（数字值为4）：视频格式被不支持。</li> 
 </ul> </td> 
 </tr> 
 <tr> 
 <td>currentSrc</td> 
 <td>只读</td> 
 <td>返回该媒介标签的src属性值</td> 
 </tr> 
 <tr> 
 <td>networkState</td> 
 <td>&nbsp;只读</td> 
 <td>返回媒介的网络状态，共有4个可能值。 
 <ul> 
 <li>NETWORK_EMPTY（数字值为0）：尚未初始化；</li> 
 <li>NETWORK_IDLE（数字值为1）：加载完成，网络空闲；</li> 
 <li>NETWORK_LOADING（数字值为2）：视频加载中；</li> 
 <li>NETWORK_NO_SOURCE（数字值为3）：加载失败。</li> 
 </ul> </td> 
 </tr> 
 <tr> 
 <td>&nbsp;preload</td> 
 <td>&nbsp;可读写</td> 
 <td>&nbsp;可获取或改变媒介标签的preload属性值</td> 
 </tr> 
 <tr> 
 <td>&nbsp;buffered</td> 
 <td>&nbsp;只读</td> 
 <td>&nbsp;返回一个TimeRanges对象，确认浏览器已缓存媒介文件</td> 
 </tr> 
 <tr> 
 <td>&nbsp;readyState</td> 
 <td>&nbsp;只读</td> 
 <td>&nbsp; 返回媒介当前播放位置的就绪状态，共有5个可能值。 
 <ul> 
 <li>HAVE_NOTHING（数字值为0）：当前播放位置无有效媒介资源；</li> 
 <li>HAVE_METADATA（数字值为1）：加载中，媒介资源确认存在，但当前位置没有能够加载到有效媒介数据进行播放；</li> 
 <li>HAVE_CURRENT_DATA（数字值为2）：已获取到当前播放数据，但没有足够的数据进行播放；</li> 
 <li>HAVE_FUTURE_DATA（数字值为3）：已获取到后续播放数据，可以进行播放；</li> 
 <li>HAVE_ENOUGH_DATA（数字值为4）：可以进行播放，且浏览器确认媒体数据以某一种速度进行加载，可以保证有足够的后续数据进行播放，而不会使浏览器的播放进度赶上加载数据的末端。</li> 
 </ul> </td> 
 </tr> 
 <tr> 
 <td>&nbsp;seeking</td> 
 <td>&nbsp;只读</td> 
 <td>&nbsp;返回一个布尔值，表明浏览器是否正在请求数据，ture表示浏览器正在请求数据，false表示浏览器已停止请求。</td> 
 </tr> 
 <tr> 
 <td>&nbsp;seekable</td> 
 <td>&nbsp;只读</td> 
 <td>发挥一个TimeRanges对象，表明可以对当前媒介资源进行请求。</td> 
 </tr> 
 <tr> 
 <td>&nbsp;currentTime</td> 
 <td>&nbsp;可读写</td> 
 <td>&nbsp;获取或改变视频的播放位置。单位为秒</td> 
 </tr> 
 <tr> 
 <td>&nbsp;startTime</td> 
 <td>&nbsp;只读</td> 
 <td>&nbsp;返回媒介文件播放的开始时间，通常为0</td> 
 </tr> 
 <tr> 
 <td>&nbsp;duration</td> 
 <td>&nbsp;只读</td> 
 <td>&nbsp;返回媒介文件总的播放时长</td> 
 </tr> 
 <tr> 
 <td>&nbsp;played</td> 
 <td>&nbsp;只读</td> 
 <td>&nbsp;返回一个TimeRanges对象，标明浏览器已播放的媒介资源范围</td> 
 </tr> 
 <tr> 
 <td>paused</td> 
 <td>只读</td> 
 <td>返回一个布尔值，表明媒介是否暂停播放，ture表示媒介暂停播放，false表示媒介正在播放。</td> 
 </tr> 
 <tr> 
 <td>ended</td> 
 <td>只读</td> 
 <td>返回一个布尔值，表明媒介是否已结束，ture表示媒介已经播放完毕，false表示还未播放完毕。</td> 
 </tr> 
 <tr> 
 <td>defaultPlaybackRate</td> 
 <td>可读写</td> 
 <td>返回媒介默认的播放速率，或对其赋值，改变媒介的默认播放速率。</td> 
 </tr> 
 <tr> 
 <td>playbackRate</td> 
 <td>可读写</td> 
 <td>返回当前的媒介播放速率，或对其赋值，改变当前的媒介播放速率</td> 
 </tr> 
 <tr> 
 <td>autoplay</td> 
 <td>可读写</td> 
 <td>返回一个布尔值，表明当前媒介是否设置了自动播放，ture表示当前媒介为自动播放，false表示非自动播放，或对其赋值，设置是否自动播放。</td> 
 </tr> 
 <tr> 
 <td>loop</td> 
 <td>可读写</td> 
 <td>返回一个布尔值，表明当前媒介是否设置了循环播放，ture表示当前媒介设置了循环播放，false表示没有设置循环播放，或对其赋值，设置是否循环播放。</td> 
 </tr> 
 <tr> 
 <td>controls</td> 
 <td>可读写</td> 
 <td>返回一个布尔值，表明当前媒介是否使用了浏览器默认的播放控制栏，ture表示加载了，false表示没有加载，或对其赋值，设置是否使用浏览器默认的播放控制栏</td> 
 </tr> 
 <tr> 
 <td>&nbsp;volume</td> 
 <td>可读写</td> 
 <td>返回当前媒介的音量值，或对其赋值，改变媒介的播放音量，范围为0到1，0相当于静音，1为最大音量。</td> 
 </tr> 
 <tr> 
 <td>&nbsp;muted</td> 
 <td>可读写</td> 
 <td>返回一个布尔值，表明当前媒介播放是否开启静音，ture表示没有开启静音，false表示静音，或对其赋值，设置播放是否静音。</td> 
 </tr> 
 </tbody> 
</table>

很简单，那我们来做一个demo。(很奇怪，chrome拖动进度条到最后视频有几率就死掉，自动播放到最后没有问题，这是bug？还是我自己的问题？)

![2011121517203336.jpg][]

代码如下：

![复制代码][copycode.gif]

<!DOCTYPE html>
 <html>
 <head>
 <title>html5 视频标签学习</title>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8;">
 </head>
 <body>
 
 <header>
 <h1>自定义视频播放器</h1>
 <div >
 当前播放 ：《movie1》 
 当前播放速度 ： 1X 
 当前声音大小为 ：100 
 </div>
 </header>
 <section>
 <article>
 <video style="float:left;" id="testVideo" preload="metadata" src="movie.ogg" height="300" controls>
 你的浏览器不支持html5视频
 </video>
 <div style="float:left;margin-left:10px;">
 <h3>播放列表</h3>
 <ul>
 <li><a>movie1</a></li>
 <li><a>movie2</a></li>
 <li><a>movie3</a></li>
 <li><a>movie4</a></li>
 </ul>
 </div>
 </article>
 <article style="clear:both;">
 
 <button id="play">播放</button>
 <button id="pause">暂停</button>
 <button id="stop">停止</button>
 <button id="prev">前一个</button>
 <button id="next">后一个</button>
 <button id="upVolume">音量+</button>
 <button id="downVolume">音量-</button>
 <button id="fastFoward">快进</button>
 <button id="fastBackward">快退</button>
 
 从<input type="text" id="min" style="width:20px;" value="0"/>分跳转到<input type="text" id="sec" style="width:20px;" value="0"/>播放 
 <button id="locate">确认</button>
 </article>
 <section>
 <script type="text/javascript">
 var $ = function(id){
 return document.getElementById(id);};
 var _video = $("testVideo");
 
 //视频列表
 　　　　　　　var playList = {
 current : 0,
 list : ["movie.ogg","war3.ogg","movie.ogv","trailer.webm","trailer.ogv"]
 }
 
 var videoUtil = {
 //播放
 play : function(){
 _video.play();
 },
 //暂停
 pause : function(){
 _video.pause();
 },
 //停止
 stop : function(){
 _video.currentTime = 0;
 _video.pause();
 },
 //下一个视频
 next : function(){
 if(playList.current == playList.list.length-1){
 playList.current = 0;
 }else{
 playList.current++;
 }
 _video.src=playList.list[playList.current];
 _video.play();
 },
 //前一个视频
 prev : function(){
 if(playList.current == 0){
 playList.current = palyList.list.length-1;
 }else{
 playList.current--;
 }
 _video.src=playList.list[playList.current];
 _video.play();
 },
 //加大声音,每次加大1/10
 upVolume : function(){
 _video.volume += 0.1;
 },
 //减小声音，每次减小1/10
 downVolume : function(){
 _video.volume -= 0.1;
 },
 //翻倍加快播放速度
 fastFoward : function(){
 //FF不支持playbackRate
 　　　　　　　　　　　　if(_video.playbackRate){
 _video.playbackRate = _video.playbackRate*2;
 }else{
 alert("对不起，你的浏览器不支持改变播放速度！");
 }
 
 },
 //降低播放速度
 fastBackward : function(){
 if(_video.playbackRate){
 _video.playbackRate = _video.playbackRate/2;
 }else{
 alert("对不起，你的浏览器不支持改变播放速度！");
 }
 },
 //跳转到指定时间点播放
 locate : function(){
 var min = $("min").value;
 var sec = $("sec").value;
 var time = parseInt(min)*60+parseInt(sec);
 _video.currentTime = time;
 _video.play();
 },
 bindEvent : function(){
 var self = this;
 
 //绑定页面上各个按钮的事件
 　　　　　　　　　　　　var btns = document.getElementsByTagName("button");
 for(var i = 0 ;i < btns.length ; i++){
 var el = btns[i];
 el.onclick = self[el.id];
 }
 
 //播放完毕自动播放下一个
 _video.onended = function(){
 var event = document.createEvent("HTMLEvents");
 event.initEvent('click', true, true);
 $("next").dispatchEvent(event);
 }
 
 //循环检查视频的当前状态
 setInterval(function(){
 var speed = _video.playbackRate||1;
 var movie = "movie"+playList.current;
 var volume = parseInt(_video.volume*100);
 $("currentMovie").innerHTML = movie;
 $("currentSpeed").innerHTML = speed+"X";
 $("currentVolume").innerHTML = volume;
 },200);
 
 }
 };
 
 window.onload = function(){
 videoUtil.bindEvent();
 }
 
 </script>
 </body>
 </html>

![复制代码][copycode.gif]

[2011121517203336.jpg]: /images/20220824/279e7fd22c2644b099e6840faf59a096.png
[copycode.gif]: /images/20220824/aa273458ad374b6583eb786bc2b507d4.png