首页 > 代码库 > html 5 video 和audio属性
html 5 video 和audio属性
src属性和autoplay属性
src属性用于指定媒体数据的URL地址。
autoplay属性用于指定媒体是否在页面加载后自动播放，使用方法如下：
<video src="http://www.mamicode.com/sample.mov" autoplay="autoplay"></video>
perload属性
该属性用于指定视频或音频数据是否预加载。如果使用预加载，则浏览器会预先将视频
或音频数据进行缓冲，这样可以加快播放速度，因为播放时数据已经预先缓冲完毕。该属
性有三个可选值，分别是“none”、“metadata”和“auto”，其默认值为“auto”。
none值表示不进行预加载；
metadata表示只预加载媒体的元数据（媒体字节数、第一帧、播放列表、持续时间等）。
auto表示预加载全部视频或音频。
perload属性的使用方法如下所示。
<video src="http://www.mamicode.com/sample.mov" preload="auto"></video>
poster（video元素独有属性）和loop属性
poster（video元素独有属性）
当视频不可用时，可以使用该元素向用户展示一幅替代用的图片。
当视频不可用时，最好使用poster属性，以免展示视频的区域中出现一
片空白。该属性的使用方法如下所示：
<video src="http://www.mamicode.com/sample.mov" psoter="cannotuse.jpg"></video>
loop属性
用于指定是否循环播放视频或音频，其使用方法如下：
<video src="http://www.mamicode.com/sample.mov" autoplay="autoplay" loop="loop"></video>
lcontrols属性、wdith属性和height属性（后两个video元素独有属性）
•controls属性
指定是否为视频或音频添加浏览器自带的播放用的控制条。控制条中具
有播放、暂停等按钮。其使用方法如下：
<video src="http://www.mamicode.com/sample.mov" controls="controls"></video>
•width属性与height属性（ video元素独有属性）
用于指定视频的宽度与高度（以像素为单位），使用方法如下：
<video src="http://www.mamicode.com/sample.mov" width="500" height="500"></video>
lerror属性
在读取、使用媒体数据的过程中，在正常情况下，该属性为null，但
是任何时候只要出现错误，该属性将返回一个MediaError对象，该对象
的code属性返回对应的错误状态码，其可能的值包括：
•MEDIA_ERR_ABORTED（数值1）：媒体数据的下载过程由于用户的操作原因而被终止。
•MEDIA_ERR_NETWORK（数值2）：确认媒体资源可用，但是在下载时出现网络错误，媒体数据的下载过程被终止。
•MEDIA_ERR_DECODE(数值3）：确认媒体资源可用，但是解码时发生错误。
•MEDIA_ERR_SRC_NOT_SUPPORTED（数值4）：媒体资源不可用媒体格式不被支持。
注意：error属性为只读属性。
lnetworkState属性
该属性在媒体数据加载过程中读取当前网络的状态，其值包
括：
•NETWORK_EMPTY（数值0）：元素处于初始状态。
•NETWORK_IDLE（数值1）：浏览器已选择好用什么编码格式来播放媒体，但尚未建立网络连接。
•NETWORK_LOADING（数值2）：媒体数据加载中。
•NETWORK_NO_SOURCE（数值3）：没有支持的编码格式，不执行加载。
注意：networkState属性为只读属性
lcurrentSrc属性、buffered属性
•可以用currentSrc属性来读取播放中的媒体数据的URL地址，该属性为只读
属性。
•buffered属性返回一个实现TimeRanges接口的对象，以确认浏览器是否已
缓存媒体数据。
TimeRanges对象的作用：TimeRanges对象表示一段时间范围，在大多数情况下，该对
象表示的时间范围是一个单一的以“0”开始的范围，但是如果浏览器发出Range Rquest请
求，这时TimeRanges对象表示的时间范围是多个时间范围。
TimeRanges对象的属性：该对象具有一个length属性，表示有多少个时间范围，多数情
况下存在时间范围时，该值为“1”；不存在时间范围时，该值为“0”，
TimeRanges对象有两个方法：start(index)和end(index)，多数情况下将index设置为
“0”就可以了。当用element.buffered语句来实现TimeRanges接口时，start(0)表示当前
缓存区内从媒体数据的什么时间开始进行缓存，end(0)表示当前缓存区内的结束时间。
注意： buffered属性为只读属性
lreadyState属性
该属性返回媒体当前播放位置的就绪状态，其值包括：
•HAVE_NOTHING（数值0）：没有获取到媒体的任何信息，当前播放位置
没有可播放数据。
•HAVE_METADATA（数值1）：已经获取到了足够的媒体数据，但是当前播
放位置没有有效的媒体数据（也就是说，获取到的媒体数据无效，不能播放）。
•HAVE_CURRENT_DATA（数值2）：当前播放位置已经有数据可以播放，
但没有获取到可以让播放器前进的数据。当媒体为视频时，意思是当前帧的数据
已获得，但还没有获取到下一帧的数据，或者当前帧已经是播放的最后一帧。
•HAVE_FUTURE_DATA（数值3）：当前播放位置已经有数据可以播放，而
且也获取到了可以让播放器前进的数据。当媒体为视频时，意思是当前帧的数据
已获取，而且也获取到了下一帧的数据，当前帧是播放的最后一帧readyState
属性不可能为HAVE_FUTURE_DATA。
•HAVE_ENOUGH_DATA（数值4）：当前播放位置已经有数据可以播放，
同时也获取到了可以让播放器前进的数据，而且浏览器确认媒体数据以某一种速
度进行加载，可以保证有足够的后续数据进行播放。
注意：readyState属性为只读属性。
lseeking属性和seekable属性
•seeking属性返回一个布尔值，表示浏览器是否正在请求某一
特定播放位置的数据，true表示浏览器正在请求数据，false表示浏览器
已停止请求。
•seekable属性返回一个TimeRanges对象，该对象表示请求到的数
据的时间范围。当媒体为视频时，开始时间为请求到视频数据第一帧的
时间，结束时间为请求到视频数据最后一帧的时间。
注意：这两个属性均为只读属性。
lcurrentTime属性、startTime属性和duration属性
•currentTime属性用于读取媒体的当前播放位置，也可以通过修改
currentTime属性来修改当前播放位置。如果修改的位置上没有可用的
媒体数据时，将抛出INVALID_STATE_ERR异常；如果修改的位置超
出了浏览器在一次请求中可以请求的数据范围，将抛出INDEX_SIZE_ERR
异常。
•startTime属性用来读取媒体播放的开始时间，通常为“0”。
•duration属性来读取媒体文件总的播放时间。
lplayed属性、paused属性和ended属性
•played属性返回一个TimeRanges对象，从该对象中可以读
取媒体文件的已播放部分的时间段。开始时间为已播放部分的开
始时间，结束时间为已播放部分的结束时间。
•paused属性返回一个布尔值，表示是否暂停播放，true表示
媒体暂停播放，false表示媒体正在播放。
•ended属性返回一个布尔值，表示是否播放完毕，true表示
媒体播放完毕，false表示还没有播放完毕。
注意：三者均为只读属性。
ldefaultPlaybackRate属性和playbackRate属性
•defaultPlaybackRate属性用来读取或修改媒体默认的播放
速率。
•playbackRate属性用于读取或修改媒体当前的播放速率。
lvolume属性和muted属性
•volume属性用于读取或修改媒体的播放音量，范围为“0”到
“1”，“0”为静音，“1”为最大音量。
•muted属性用于读取或修改媒体的静音状态，该值为布尔值
，true表示处于静音状态，false表示处于非静音状态。
html 5 video 和audio属性
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。