HTML5+CSS3 音频视频属性

在HTML 5中，使用audio标签与vidio标签播放音频视频文件，具有的属性大致相同，详细介绍如下： 1．Src属性

该属性主要用于设置音频视频文件的URL地址。

示例：7-3 src.html

src属性应用

2．Preload属性

Preload属性默认为只读，主要用于指定在浏览器中播放音频和视频文件时，是否对数据进行预加载。如果是的话，浏览器会预先对视频或音频文件进行缓冲，这样可以提高播放的速度。

Preload属性有三个可选值，包括none、metadata与auto，默认值为auto。

  

None表示不进行预加载。

Metadata表示只预加载媒体的元数据（媒体字节数、第一帧、插入列表、持续时间等）。 Auto 表示加载全部视频或音频。

使用方法如下： < audio src=”sky.ogg” preload=”auto”> 3．Poster属性

该属性为video标签的独有属性，主要用于当视频不可用时，使用该标签向展示一幅代用的图片。使用方法如下： 4．Autoplay属性 该属性主要用于指定在页面中加载音频视频文件后，设置为自动播放。

示例：7-4 autoplay.html

autoplay属性应用

加载文件后，音频已自动播放

5．Loop属性

该属性主要用于设置是否循环播放视频或音频文件，使用方法如下：

< audio src=”sky.ogg” autoplay loop> 6．Controls属性

该属性主要用于设置是否为视频或音频文件添加浏览器自带的播放控制条。该控制主要包括播放、暂停和音乐控制等功能。使用方法如下：

该属性主要用于设置视频的宽度和高度，以像素为单位，使用方法如下： 8．networkState属性 默认属性为只读，当音频或视频文件在加载时，可以使用video标签或audio标签的networkState属性读取当前的网络状态，介绍如下：

   

NETWORK_EMPTY：网络处于初始状态，数字值为0。

NETWORK_IDLE：网络尚未建立连接，但浏览器已选择好编码格式，数字值为1。 NETWORK_LOADING：音频或视频文件加载中，数字值为2。

NETWORK_NO_SOURCE：没有支持的编码格式，不执行加载，数字值为3。

9．Error属性

在播放音频和视频文件时，如果出现错误，error属性将返回一个MediaError对象，该对象有种错误状态，介绍如下：

   

MEDIA_ERR_ABORTED：音频或视频文件在下载过程由于用户的操作原因而中止，数字值为1。

MEDIA_ERR_NETWORK：音频或视频文件可用，在下载时出现网络错误，造成音频或视频文件在下载过程中被中止，数字值为2。

MEDIA_ERR_DECODE：音频或视频文件可用，在解码时发生错误，数字值为3。 MEDIA_ERR_SRC_NOT_SUPPORTED：音频或视频文件不可用，格式不被支持，数字值为4。

示例：7-5 error.html

返回信息

10．readyState属性

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

  

HAVE_NOTHING（数字值为0）：没有取到媒体的任何信息，当前播放位置没有可播放数据。

HAVE_METADATA（数字值为1）：已经获取到了足够的媒体数据，但是当前播放位置没有有效的媒体数据（也就是说，获取到的媒体数据无效，不能播放）。

HAVE_CURRENT_DATA（数字值为2）：当前播放位置已经有数据可以播放，但没有获取到可以让播放器前进的数据。当媒体为视频时，意思是当前帧的数据已获得，但还没有获取到下一帧的数据，或者当前帧的数据已经播放到最后一帧。 

HAVE_FUTURE_DATA（数字值为3）：当前播放位置已经有数据可以播放，而且也获

取到可以让播放器前进的数据。当媒体为视频时，意思是当前帧的数据已获得，而且也获取到下一帧的数据，当前帧是播放到最后一帧时，readyState属性不可能为HAVE_FUTURE_DATA。 

HAVE_ENOUGH_DATA（数字值为4）：当前播放位置已经有数据可以播放，同时也获取到可以让播放器前进的数据，而且浏览器确认媒体数据以某一种速度进行加载，可以保证有足够的后续数据进行播放。

11．currentSrc属性

默认属性为只读，主要用于读取播放中的音频或视频文件的URL地址。 12．Buffered属性 属性为只读，可以使用video标签或audo标签的Buffered属性来返回一个对象，该对象实现TimeRanages接口，以确认浏览器是否已缓冲媒体数据。

13．Paused属性

该属性主要用来返回一个布尔值，表示是否处于暂停播放中，true表示音频或视频文件暂停播放，false表示音频或视频文件正在播放。

示例：7-6 paused.html

paused属性应用