首页 > web前端 > html/css/css3 > HTML5中audio元素和video元素属性详解
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
07-14

HTML5中audio元素和video元素属性详解

文章目录 [收起]

前面讲了HTML中如何使用audio元素和video元素播放多媒体,这一篇来讲解一下中audio元素和video元素的属性,进一步了解audio元素和video元素。

audio元素和video元素所具有的属性大致相同,所以我们先来看一下这两个元素都具有哪些属性。

src属性

该属性指定媒体数据的URL地址。

autoplay属性

在该属性中指定是否在页面加载后自动播放,使用方法:

<video src="test.mov" autoplay></video>

preload属性

在该属性中指定视频或音频数据是否预加载。如果使用预加载的话,浏览器会预先将视频或音频进行缓冲,这样可
以加快播放的速度,因为播放时数据已经预先缓冲完毕。

该性情有三个可选值:none,metadata与auto,默认值为auto.

  • none表示不进行预加载。
  • metadata表示只预加载媒体的元数据(媒体字节数、第一帧、播放列表、持续时间等)。
  • auto表示预加载全部视频或音频。

该属性的使用方法

 <video src="test.mov" preload="auto"></video>

poster (video元素独有属性)

当视频的不可用时,可以使用该元素向用户展示一幅替代用的图片,使用方法:

<video src="test.mov" poster="CannotUse.jpg"></video>

loop属性

在该属性中指定是否循环播放视频或音频,使用方法:

<video src="test.mov" autuplay loop></video>

controls属性

该属性中指定是否为视频或音频添加浏览器自带的播放用的控制条。控制条中具有播放、暂停等按钮。

<video src="test.mov" controls></video>

开发者也可以在脚本中自定义控制条,而不使用浏览器默认的控制条。

with与height(video独有属性)

在该属性中指定视频的宽度与高度(以像素为单位)使用方法:

<video src="test.mov" width="500" height="300"></video>

error属性

在读取、使用媒体数据的过程中中,正常情况下,video元素或audio元素的error属性为null,但是任何时候只要出
现错误,error属性将返回一个MediaError对象,该对象的code返回对应的错误状态,错误状态共有4个可能值,如
下所示。

  • MEDIA_ERR_ABORTED(数字值为1):媒体数据的下载过程由于用户的操作原因而被中止。
  • MEDIA_ERR_NETWORK(数字值为2):确认媒体资源可用,但是在下载时出现网络错误,媒体数据下载过程被中止。
  • MEDIA_ERR_DECODE(数字值为3):确认媒体资源可能,但是解码时发生错误。
  • MEDIA_ERR_SRC_NOT_SUPPORTED(数字值为4):媒体格式不被支持。
  • error为只读属性。

读取错误状态的代码如下:

<video id="videoElement" src="test.mov">
 <script>
 var video = document.getElementById("videoElement");
 video.addEventListener("error", function()
 {
     var error=video.error;
     switch(error.code)
     {
         case 1:
             alert("视频的下载过程被中止。");
             break;
         case 2:
             alert("网络发生故障,视频的下载过程被中止。");
             break;
         case 3:
             alert("解码失败。");
             break;
         case 4:
             alert("不支持播放的视频格式。");
             break;
    }
 },false);
 </script>

networkState属性

在媒体数据加载过程中可以使用networkState属性读取当前的网络状态,共有如下所示的4个可能值:

  • NETWORK_EMPTY(数字值为0):元素牌初始状态。
  • NETWORK_IDLE(数字值为1):浏览器已选择好用什么编码格式来播放媒体,但尚未建立网络连接。
  • NETWORK_LOADING(数字值为2):媒体数据加载中。
  • NETWORK_NO_SOURCE(数字值为3):没有支持的编码格式,不执行加载。
  • error为只读属性。

读取错误状态的代码如下:

<video id="videoElement" src="test.mov">
 <script>
 var video = document.getElementById("videoElement");
 video.addEventListener("progess", function(e)
 {
     var networkStateDisplay = document.getElementById("networkState");
     //根据networkState属性的值来执行处理
     if(video.networkState == 2)
     {
         //计算已加载的字节数与总字节数。
         networkStateDisplay.innerHTML = "加载中...[" + e.loaded + "/" + e.total + "bype]";
     }
     else if(video.networkState == 3)
     {
         networkStateDisplay.innerHTML = "加载失败";
     }
 },false);
 </script>

currentSrc属性

可以使用currentSrc属性来读取播放中媒体数据的URL地。
currentSrc属性为只读属性。

buffered属性

可以使用video元素或audio元素的buffered属性来返回一个对象,该对象实现TimeRanges接口,以确认浏览器是否已缓存媒体数据。TimeRanges对象表示一段时间范围,在大多数情况下,TimeRanges对象表示的时间范围是一个单一的以0开始的范围,但是如果浏览器发出Range Requests请求,这时TimeRanges对象表示的时间范围是多个时间范围。

TimeRanges对象对象具有一个length属性,表示有多少个时间范围,大多数情况下存在时间范围是,该值为1;不存在时间范围是,该值为0。TimeRanges对象还具体两个方法,TimeRanges.start(index)与TimeRanges.end(index),大多数情况下将index值设为0就可以了。当用videoElement.buffered语句来实现TimeRanges接口时,TimeRanges.start(0)表示当前缓存区内从媒体数据的什么时间开始进行缓存,TimeRanges.end(0)表示当前缓存区内的结束时间。

readyState属性

可以使用video元素或audio元素的readyState属性返回媒体当前播放位置的就绪状态,共有5个可能的值。

  • HAVE_NOTHING(数字值为0):没有获取到媒体的任何信息,当前播放位置没有可播放数据。
  • HAVE_METADATA(数字值为1):已经获取到足够的媒体数据,但是当前播放位置没有有效的媒体数据(也就是说,获取到的媒体数据无效,不能播放)。
  • HAVE_CURRENT_DATA(数字值为2):当前播放位置已经有数据可以播放,但没有获致到可以让播放器前进的数据。当媒体为视频时,意思是当前帖的数据已获取,但没有获取到下一帧的数据,或者当前帧已经是播放的最重一帧。
  • HAVE_FUTURE_DATA(数字值为3):当前播放位置已经有数据可以播放,而且也获取到了可以让播放器前进的数据。当媒体为视频时,意思是当前帧的数据已获取,而且也获取到了下刺目贩数据,当前帧是播放的最后一帧时,readyState属性不可能为HAVE_FUTURE_DTAT。
  • HAVE_ENOUGH)DATA(数字值为4):当前播放位置已经有数据可以播放,同时也获取到了可以让播放器前进的数据,而且浏览器确认媒体以某一种速度进行加载,可以保证有足够的后续数据进行播放。

readyState属性为只读属性。

seeking属性与seekable属性

可以使用video元素或audio元素的seeking属性返回一个布尔值,表示浏览器是否正在请求某一特定播放位置的数
据,true表示浏览器正在请求数据,false表示浏览器已停止请求。

可以使用video元素或audio元素的seekable属性来返回一个TimeRanges对象,该对象表示请求到的数据时间范围。

当媒体为视频时,开始时间为请求到视频数据的第一帧的时间,结束时间为请求到视频数据的最后一帧的时间。

seeking属性与seekable属性只读属性

currentTime属性、startTime属性与duration属性

可以使用video元素或audio元素的currentTime属性来读取媒体的当前播放位置,也可以通过修改currentTime性情
为修改当前的播放位置。如果修改的位置上没有可用的媒体数据时,将抛出INVALID_STATE_ERR异常;如果修改的
位置超出了浏览器在一次请求中可以请求的数据范围,将抛出INDEX_SIZE_ERR异常。

可以使用video元素或audio元素的startTime属性来读取媒体播放的开始时间,通常为0。

可以使用video元素或audio元素的dutation属性来读取媒体文件总的播放时间。

三者的时间、单位均为秒,currentTime为可读与属性,其余两个均为只读属性。

played属性、paused属性、ended属性

可以使用video元素或audio元素的played属性来返回一个TimeRanges对象,该对象中可以读取媒体文件的已播放部份的时间段。开始时间为已播放部份的开始时间,结束时间为已播放部份的结束时间。

可以使用video元素或audio元素的paused属性来返回一个布尔值检测是否处于暂停状态,true表示暂停播放,
false表示正在播放。

可以使用video元素或audio元素的end属性来返回一个布尔值检测是否播放完毕,true表示已播放完毕,false表示
还未播放完毕。

三者均为只读属性。

defaultPlayRate属性与playbackRate属性

defaultPlayRate属性读取或修改媒体的播放速率。

playbackRate属性读取或修改媒体当前的播放速率。

volume属性和muted属性

volume属性读取或修改媒体的的播放音量,范围从0到1,0为表单,1为最大音量。

muted属性读取或修改媒体的表单状态,该值为布尔值,true表示静音状态,false表示非静音状态。

进入HTML5多媒体播放video元素与audio元素详解

最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

留下一个回复

你的email不会被公开。

*