html多媒体元素基本属性

video元素与audio元素所具有的属性大致相同,

下面来看一下这两个元素都具有哪些属性。

 src属性和autoplay属性

src属性用于指定媒体数据的URL地址。

autoplay属性用于指定媒体是否在页面加载后自动播放,使用方法如下。

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

在文件中创建多媒体元素<video>,并在元素的src属性中,

设置播放的视频文件的URL地址,并设置页面加载完成后自动播放这个文件。代码如下。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8" />

<title>使用多媒体元素播放文件</title>

</head>

<body>

<video id="vdoMain" src="../Video/2.ogv" autoplay="true">

你的浏览器不支持视频

</video>

</body>

</html>

 perload属性

perload属性用于指定视频或音频数据是否预加载。如果使用预加载,

则浏览器会预先将视频或音频数据进行缓冲,这样可以加快播放速度,

因为播放时数据已经预先缓冲完毕。

该属性有3个可选值,分别是none、metadata和auto,其默认值为auto。

 none值表示不进行预加载。

 metadata表示只预加载媒体的元数据(媒体字节数、第一帧、播放列表、持续时间等)。

 auto表示预加载全部视频或音频。

该属性的使用方法如下。

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

 poster(video元素独有属性)和loop属性

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

最好使用poster属性,以免展示视频的区域中出现一片空白。

该属性的使用方法如下。

<video src="sample.mov" psoter="cannotuse.jpg"></video>

在文件中创建一个video元素,为video元素设置poster属性,并选取一幅图片作为该属性的值。代码如下。

<html>

<head>

<meta charset="utf-8" />

<title>设置video 元素的poster 属性</title>

</head>

<body>

<video id="vdoMain" src="../Video/2.ogv" controls="true" poster="../Images/1.jpg">

你的浏览器不支持视频

</video>

</body>

</html>

运行实例,在播放视频文件之前,在视频播放区域中首先将显示poster属性指定的图片,

loop属性用于指定是否循环播放视频或音频,

其使用方法如下。

<video src="sample.mov" autoplay="autoplay" loop="loop"></video>

 controls属性、width属性和height属性(后两个是video元素独有属性)

controls属性指定是否为视频或音频添加浏览器自带的播放用的控制条。

控制条中具有播放、暂停等按钮。其使用方法如下。

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

说明

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

width属性与height属性用于指定视频的宽度与高度(以像素为单位),

使用方法如下。

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

在文件中创建一个video元素,首先在元素的src属性中设置需要播放的视频文件,

然后分别设置video元素的宽度与高度。代码如下。

<html>

<head>

<meta charset="utf-8" />

<title>设置video 元素的大小</title>

</head>

<body>

<video id="vdoMain" src="../Video/2.ogv" autoplay="true" width="360" height="220">

你的浏览器不支持视频

</video>

</body>

</html>

 error属性

在读取、使用媒体数据的过程中,正常情况下该属性为null,

但是任何时候只要出现错误,该属性将返回一个MediaError对象,

该对象的code属性返回对应的错误状态码,其可能的值如下。

 MEDIA_ERR_ABORTED(数值1):媒体数据的下载过程由于用户的操作而被终止。

 MEDIA_ERR_NETWORK(数值2):确认媒体资源可用,但是在下载时出现网络错误,媒体数据的下载过程被终止。

 MEDIA_ERR_DECODE(数值3):确认媒体资源可用,但是解码时发生错误。

 MEDIA_ERR_SRC_NOT_SUPPORTED(数值4):媒体资源不可用,媒体格式不被支持。

error属性为只读属性。

 networkState属性

该属性在媒体数据加载过程中读取当前网络的状态,其值如下。

 NETWORK_EMPTY(数值0):元素处于初始状态。

 NETWORK_IDLE(数值1):浏览器已选择好用什么编码格式来播放媒体,但尚未建立网络连接。

 NETWORK_LOADING(数值2):媒体数据加载中。

 NETWORK_NO_SOURCE(数值3):没有支持的编码格式,不执行加载。

networkState属性为只读属性,读取网络状态的实例代码如下。

 currentSrc属性、buffered属性

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值