标签：播放器 audio 多媒体 元素 图文 video 播放 属性
图文详解 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时，取消播放器静音。
标签：播放器,audio,多媒体,元素,图文,video,播放,属性 来源： https://blog.csdn.net/qq_45027204/article/details/105252184
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。