HTML5中的video元素和audio元素

一、video元素和audio元素的简介:

1、video元素:HTML5中专门用来播放网络上的视频或者电影;audio元素:在HTML5中专门用来播放网络上的音频;使用video元素和audio元素进行播放时就不再需要使用其他的插件了,只要浏览器支持HTML5即可。

2、浏览器的支持情况:Safari3以上、Firefox4以上、Opera10以上、chrome3.0以上版本都对video元素和audio元素支持!

3、video元素和audio元素的使用方法:

(1)video元素的使用方法:

1)video元素要设定好长宽和src属性即可:

<video width="750" height="400" src="MP4.mp4"></video>

2)对于不支持video元素的浏览器可以在中间插入替换文字:

<video width="750" height="400" src="MP4.mp4">您的浏览器不支持video元素</video>

(2)audio元素的使用方法:

1)audio元素只需要指定一个src属性:

<audio src="MP3.mp3" controls="controls"></audio>

2)对于不支持的浏览器可以在这对元素之间加入提示语来代替:

<audio src="MP3.mp3" controls="controls">您的浏览器不支持audio元素</audio>

(3)source元素指定多个播放格式与编码:source元素可以为同一个媒体数据指定多个播放格式与编码方式,以确保浏览器可以从中选择一种自己支持的播放格式进行播放。选择顺序自上而下,直到选择都所支持的格式为止。其使用方法如下:

<video>
	<source src="video.m4v" type="video/mp4" />
	<source src="video.webm" type="video/webm" />
	<source src="video.ogv" type="video/ogg" />
	<source src="video.mp4" />
</video>

(4)各种设备对于编码格式的支持:
1)webm(.webm)格式的视频:Firefox4.0以上、chrome6.0以上、Opera10.6以上;

2)mp4(.m4v)格式的视频:IE9.0以上、Safari3.1以上、iso5.0以上、Android4.0以上;

3)ogg(.ogv)格式的视频:Firefox3.5以上、chrome3.0以上、Opera10.5以上;

4)mp4(.mp4)格式的视频:IE9.0以上、Safari3.1以上、iso3.0以上、Android2.3以上;

二、video元素与audio元素的常用属性:

1、src属性:在这个属性里面指定媒体数据的URL地址;

2、controls属性:指定是否为视频或者音频数据添加浏览器自带的播放控制条,控制条中有播放按钮、暂停按钮。其使用方法如下:

<audio src="MP3.mp3" controls="controls"></audio>

3、width属性和height属性(video独有):指定视频的宽度和高度。其使用方法如下:

<video width="750" height="400" src="MP4.mp4"></video>

4、autoplay属性:这个属性指定是否当我们页面加载完成之后就开始自动播放;

5、preload属性:这个属性指定是否对数据进行预加载,如果是的话,浏览器会将视频数据或者音频数据进行缓冲,这样做可以加快播放的速度。preload属性的三个值:

(1)none表示不进行预加载;

(2)metadata表示只预加载媒体的元数据;

(3)auto(默认值)表示预加载全部的视频或音频;

其使用方法如下:

<audio src="MP3.mp3" preload="auto"></audio>

6、poster属性(video独有):当视频不可以播放的时候,使用poster元素向用户展示一张图片代替视频。poster的使用方法如下:

<video width="750" height="400" src="MP4.mp4" poster="video.jpg"></video>

7、loop属性:指定是否循环播放视频或者音频数据。loop的使用方法如下:

<video width="750" height="400" src="MP4.mp4" autoplay="auto" loop="loop"></video>

8、error属性:读取过程中一旦发生错误,返回一个Media Error对象,这个对象的code返回对应的错误状态,默认情况下video和audio的error属性都是null;4种错误状态,返回一个数字值,它表示音频/视频的错误状态:

(1)1=MEDIA_ERR_ABORTED -取回过程被用户中止;

(2)2=MEDIA_ERR_NETWORK -当下载时发生错误;

(3)3=MEDIA_ERR_DECODE  -当解码时发生错误;

(4)4=MEDIA_ERR_SRC_NOT_SUPPORTED -媒体不可用或者不支持音频/视频;

(5)读取错误状态示例:

1)HTML代码:

<video id="video" src="video.mp4"></video>

2)JavaScript代码:

var video = document.getElementById("video");
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;
	}
},flase);

9、networkState属性:返回音频/视频的当前网络状态(activity)。4种错误状态,表示音频/视频元素的当前网络状态,具体错误如下:

(1)0=NETWORK_EMPTY -音频/视频尚未初始化;

(2)1=NETWORK_IDLE  -音频/视频是活动的并且已经获取资源,但是并为使用网络;

(3)2=NETWORK_LOADING -浏览器正在下载数据;

(4)3=NETWORK_NO_SOURCE - 未找到音频/视频来源。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值