图文详解 video和audio元素的属性、事件及使用
HTML5的多媒体元素
HTML5中主要增加了两个新的多媒体元素：video和audio。从字面意思可以知道，video元素是与视频相关的，用于在页面中播放视频文件；audio元素是与音频相关的，用于在页面中播放音频文件。下面将详细介绍这两个元素的属性、事件及使用。
多媒体元素的属性
autoplay属性
该属性用于设置指定的媒体文件，在页面加载完毕后是否自动播放。对于有的页面来说，所包含的视频或音频信息，不需要得到用户指令就可以直接播放。例如，页面内的宣传片、广告信息等，可以在对应的多媒体元素上添加autoplay属性的设置达到媒体自动播放的效果。
使用autoplay属性的示例代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5的多媒体 </title>
</head>
<body>
<video id="myvideo" src="video/video1.mp4" autoplay="true"></video>
<audio id="myaudio" src="audio/audio.mp3" autoplay="true"></audio>
</body>
</html>
此段代码中，分别添加了一个video视频元素和一个audio音频元素，并将它们的autoplay属性设置为true。当该页面打开时，视频和音频会同时开始播放。
controls属性
**该属性用于在页面播放器面板上，显示一个元素自带的控制按钮工具栏。**工具栏中提供了播放/暂停按钮、播放进度条、静音开关，对于不同的浏览器，该工具栏样式可能会有所区别。
使用controls属性的示例代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5的多媒体 </title>
</head>
<body>
<video id="myvideo" src="video/video1.mp4" controls="true">
</video>
<br>
<br>
<audio id="myaudio" src="audio/audio1.mp3" controls="true">
</audio>
</body>
</html>
此段代码分别为video及audio元素添加了controls属性设置。保存上述代码并在浏览器中运行，得到的效果下图所示。
上图是在Chrome浏览器中的显示效果，其中上面部分显示的是video元素生成的视频控件，下面部分为audio元素生成的音频控件。
error属性
该属性是一个只读属性，用于当多媒体元素加载或读取媒体文件过程中出现错误或异常时，返回一个错误对象MediaError，用于指示错误类型。错误对象MediaError提供的返回值及说明如下表所示。
使用error属性获取错误信息的示例代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5的多媒体 </title>
</head>
<body>
<script>
function show()
{
var video = document.getElementById("myvideo");
var errorCode = video.error.code; // 获取MediaError返回值
if(errorCode=="1")
{
alert("读取或加载媒体文件出错！");
}
else if(errorCode=="2")
{
alert("网络资源不可用！");
}
else if(errorCode=="3")
{
alert("解码错误！");
}
else
{
alert("不支持的媒体格式！");
}
}
</script>
<video id="myvideo" src="vedio.txt" controls="true" one rror="show()">
</video>
</body>
</html>
此段代码中，为video元素指定了一个txt类型的文件作为媒体文件，显然这是一个错误的媒体格式。保存上述代码并在浏览器中运行，得到的结果如图所示。
poster属性
该属性用于指定一个图片路径，该图片将占据video元素对应视频控件在网页中的位置，并在播放video元素指定媒体文件之前显示，或者当播放出错时显示错误的信息。使用poster属性的示例代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5的多媒体 </title>
</head>
<body>
<video id="myvideo" src="video/video1.mp4" controls="true" poster="error.jpg"></video>
</body>
</html>
保存此段代码并在浏览器中运行，得到的效果如图所示。所显示的图片就是poster属性设定的图片。由于我们没有设置视频自动播放，所以poster属性指定的图片被显示在页面中。当我们单击播放按钮后，将开始正式播放视频内容。
networkState属性
该属性用于返回加载媒体文件的网络状态。在浏览器加载媒体文件时，通过调用onProgress事件获取当前网络状态值。networkState提供的返回值及说明如表所示。
使用networkState属性获取错误信息的==示例代码==如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5的多媒体 </title>
</head>
<body>
<script>
function checkProgress()
{
var video = document.getElementById("myvideo");
var state = video.networkState; // 获取媒体加载状态
var result = document.getElementById("result");
if (state=="0")
{
result.innerHTML="媒体信息正在初始化";
}
else if (state=="1")
{
result.innerHTML="媒体加载完毕，请单击播放";
}
else if (state=="2")
{
result.innerHTML="正在加载媒体信息";
}
else
{
result.innerHTML="媒体加载失败";
}
}
</script>
<video id="myvideo" src="video1.mp4" onProgress="checkProgress()"controls=" true"></video>
<p>
<span id="result"></span>
</p>
</body>
</html>
此段代码中，通过onProgress指定的JavaScript方法checkProgress()对媒体加载状态进行处理。保存上述代码并在浏览器中运行，得到的结果如下图所示。（由于本例中加载的资源为本地资源，所以很快即可完成加载。如果通过媒体资源链接加载网络上的媒体文件，此属性的作用将非常明显。）
width与height属性
这两个属性主要用于设置媒体控件在页面中显示的大小，单位为像素，只适用于video元素。对于video元素来说如果未指定宽度和高度属性，该元素对应控件在浏览器中将默认以媒体元素大小进行显示。
readyState属性
该属性用于返回播放器当前媒体文件的播放状态。当媒体文件开始播放时，通过调用onPlay事件获取当前媒体播放状态值。readyState提供的返回值及说明如下表所示。
从readyState的返回值我们可以看出，该属性主要针对媒体资源为网络媒体时，返回媒体获取进度，用于控制播放。使用readyState属性的示例代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5的多媒体 </title>
</head>
<body>
<script>
function checkLoad()
{
var video = document.getElementById("myvideo");
var state = video.readyState;
var result = document.getElementById("result");
if (state=="0")
{
result.innerHTML="无可播放媒体";
}
else if (state=="1")
{
result.innerHTML="无法播放媒体信息";
}
else if (state=="2")
{
result.innerHTML="无法获取后续媒体信息";
}
else if (state=="3")
{
result.innerHTML="已获取后续媒体信息，正常播放";
}
else
{
result.innerHTML="已充分获取媒体信息资源";
}
}
</script>
<video id="myvideo" src="video1.mp4" onPlay="checkLoad()" controls="true"></video>
<p>
<span id="result"></span>
</p>
</body>
</html>
保存上述代码，并在浏览器中运行，当媒体加载完毕后，单击播放按钮，得到的效果如下图所示：
其他属性
除了上述介绍的属性外，HTML5还提供了其他多媒体相关的属性。
played、paused、ended属性
通过多媒体元素的played属性，可以获取当前播放媒体文件已播放的时长信息。通过调用played属性的TimeRangeds对象，可以获取当前播放文件的开始时间和结束时间信息。
通过多媒体元素的paused属性，可以获取当前播放器的播放状态。该属性返回值为true时，表示当前播放器处于暂停状态；该属性返回值为false时，表示当前播放器处于等待播放或正在播放状态。
通过多媒体元素的ended属性，可以获取当前播放文件是否播放完毕。该属性返回值为true时，表示当前播放文件已经播放完毕；该属性返回值为false时，表示当前播放文件没有播放完毕。
defaultPlaybackRate、playbackRate属性
defaultPlaybackRate属性用于控制播放器默认媒体播放速度，该属性初始值为1。如果修改defaultPlaybackRate的属性值，可以改变默认媒体播放速度。
playbackRate属性用于控制播放器当前媒体播放速度，该属性初始值为1。如果修改playbackRate的属性值，可以改变当前媒体播放速度，实现快放、慢放的特殊播放效果。
volume、muted属性
volume属性用于控制播放器播放媒体时的音量。该属性的取值范围为0～1，当volume取值为0时，播放器使用最低音量播放；当volume取值为1时，播放器使用最高音量播放。可以在volume规定范围内，修改设定值实现调节播放器播放声音大小的功能。
muted用于控制播放器是否静音。当muted属性值设置为true时，播放器静音；当muted属性值设置为false时，取消播放器静音。