日期:2014-05-17 浏览次数:20786 次
这两种元素所具有的属性大致相同,介绍如下:
src属性用于指定媒体数据的URL地址。
autoplay属性用于指定媒体是否在页面加载后是否自动播放,使用方法如下:
<video src="sample.mov" autoplay="autoplay"></video>
该属性用于指定视频或音频数据是否预加载。如果使用预加载,则浏览器会预先将视频或音频数据进行缓冲,这样可以加快播放速度,因为播放时数据已经预先缓冲完毕。该属性有三个可选值,分别是“none”、“metadata”和“auto”,其默认值为“auto”。
<video src="sample.mov" preload="auto"></video>
当视频不可用时,可以使用该元素向用户展示一幅替代用的图片。当视频不可用时,最好使用poster属性,以免展示视频的区域中出现一片空白。该属性的使用方法如下:
<video src="sample.mov" psoter="cannotuse.jpg"></video>
loop属性用于指定是否循环播放视频或音频,其使用方法如下:
<video src="sample.mov" autoplay="autoplay" loop="loop"></video>
在该属性中指定是否为视频或音频添加浏览器自带的播放用的控制条。控制条中具有播放、暂停等按钮。其使用方法如下:
<video src="sample.mov" controls="controls"></video>
开发者也可以在脚本中自定义控制条,而不使用浏览器默认的。
width属性与height属性用于指定视频的宽度与高度(以像素为单位),使用方法如下:
<video src="sample.mov" width="500" height="500"></video>
在读取、使用媒体数据的过程中,在正常情况下,该属性为null,但是任何时候只要出现错误,该属性将返回一个MediaError对象,该对象的code属性返回对应的错误状态码,其可能的值包括:
error属性为只读属性,示例如下:
$(function() { $("audio").bind("error", function(event) { var error = event.target.error; switch(error.code) { case 1:$("#console").prepend("<span>视频或音频的下载过程被终止。</span><br/>"); break; case 2:$("#console").prepend("<span>网络发生故障,视频或音频的下载过程被终止。</span><br/>"); break; case 3:$("#console").prepend("<span>解码失败。</span><br/>"); break; case 4:$("#console").prepend("<span>不支持的视频或音频格式。</span><br/>"); break; } }); });
该属性在媒体数据加载过程中读取当前网络的状态,其值包括:
networkState属性为只读属性,使用示例如下:
$(function() { $("video").bind("progress",function(event) { var state = event.target.networkState; switch(state) { case 0: $("#console").prepend("<span>正在进行初始化。</span><br/>"); break; case 1: $("#console").prepend("<span>已选择好编码格式,尚未建立网络连接。</span><br/>"); break; case 2: $("#console").prepend("<span>加载中...</span><br/>"); break; case 3: $("#console").prepend("<span>加载失败。</span><br/>"); break; } }); });
可以用currentSrc属性来读取播放中的媒体数据的URL地址,该属性为只读属性。
buffered属性返回一个实现TimeRanges接口的对象,以确认浏览器是否已缓存媒体数据。TimeRanges对象表示一段时间范围,在大多数情况下,该对象表示的时间范围是一个单一的以“0”开始的范围,但是如果浏览器发出Range Rquest请求,这时TimeRanges对象表示的时间范围是多个时间范围。
TimeRanges对象具有一个length属性,表示有多少个时间范围,多数情况下存在时间范围时,该值为“1”;不存在时间范围时,该值为“0”,该对象有两个方法:start(index)和end(index),多数情况下将index设置为“0”就可以了。当用element.buffered语句来实现TimeRanges接口时,start(0)表示当前缓存区内从媒体数据的什么时间开始进行缓存,end(0)表示当前缓存区内的结束时间。buffered属性为只读属性。
该属性返回媒体当前播放位置的就绪状态,其值包括: