HTML4中如果要在网页上播放一段音频或视频，必须使用第三方插件比如flash，HTML4代码量太大，容易给服务器增加负担，造成宽带浪费，为了解决这些问题，HTML5中增加了video视频元素和audio音频元素功能
（1）基础用法：
①video元素专门用来播放网络上的视频，audio元素专门用来播放网络上的音频；使用video和audio元素进行播放时不需要使用其他的插件，只要浏览器支持HTML5即可；
②audio元素必须指定src属性和controls属性（必需的），比如：<audio src="MP3.mp3"controls="controls"></audio>，对于不支持HTML5的浏览器可以在audio元素之间加入提示语句即可
③video元素除了指定src属性和controls属性（可选的），还要指定width和height，比如：<video src="time.mp4"width="700" height="400"></video>，对于不支持HTML5的浏览器可以在video元素之间加入提示语句即可
④source元素作为audio和video元素的子元素，可以为同一个媒体数据指定多种播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放，选择顺序自上而下，直到选到支持的格式为止（音频后缀名有mp3，视频后缀名有mp4/m4v/ogv/webm）比如：
<video>
<source src="video.m4v"type="video/mp4">
<source src="video.mp4"type="video/mp4">
<source src="video.webm"type="video/webm">
<source src="video.ogv"type="video/ogg">
</video>支持audio元素和video元素的demo：
<!DOCTYPEhtml>
<html>
<head>
<meta charset='utf-8'>
<title>video元素与audio元素</title>
</head>
<body>
<h1>audio元素的使用示例</h1>
<audiosrc="MP3.mp3" controls="controls"></audio>
<br/>
<h1>video元素的使用示例</h1>
<videosrc="video.mp4" width="600"height="280"></video>
</body>
</html>（2）video和audio常用的属性：
1）src属性：指定媒体数据的URL地址（播放源）
2）controls属性：指定是否为媒体数据添加浏览器自带的播放控制条
3）width和height属性（video元素独有）：指定视频的宽度和高度
4）autoplay属性：指定当页面加载完成后是否自动开始播放
5）preload属性：指定是否对数据进行预加载，如果是的话，浏览器会对媒体数据进行缓冲，加快播放速度，包括三个属性值：none表示不进行预加载，metadata表示只预加载媒体的元数据，auto（默认值）表示预加载全部的视频或音频，对比演示：
<audiosrc="MP3.mp3" controls="controls"></audio>
<br/>
<audiosrc="MP3.mp3" controls="controls"preload="none"></audio>
6）poster属性（video元素独有）：当视频一开始没有播放或者无法播放时，使用poster元素指定一张图片代替视频，使用方法：<videosrc="video.mp4" poster="img.jpg"></video>
7）loop属性：指定是否循环播放音视频文件
8）error属性：读取过程发生错误时，返回一个Media Error对象，该对象的code属性返回一个数字，表示对应的错误状态，默认值为null，数字及对应的错误状态分别为：
1=MEDIA_ERR_ABORTED（读取过程中被用户中止）
2=MEDIA_ERR_NETWORK（下载时发生错误）
3=MEDIA_ERR_DECODE（解码时发生错误）
4=MEDIA_ERR_SRC_NOT_SUPPORTED（媒体不可用或者不支持音视频）
具体demo如下：（video1.mp4文件不存在，所以可能出现错误4）
<!DOCTYPEhtml>
<html>
<head>
<meta charset='utf-8'>
<title>video元素与audio元素</title>
</head>
<body>
<h1>video和audio元素的属性error</h1>
<videosrc="video1.mp4" id='video'></video>
<scripttype="text/javascript">
varvideo=document.getElementById('video');
video.addEventListener('error',function(){
var error=video.error;//返回一个错误对象
switch(error.code){ //根据错误代码执行不同的错误状态
case 1:alert('读取过程中被用户中止');
break;
case 2:alert('下载时发生错误');
break;
case 2:alert('解码时发生错误');
break;
case 2:alert('媒体不可用或者不支持音视频');
break;
}
},false);
</script>
</body>
</html>
