图文详解 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属性设置。保存上述代码并在浏览器中运行,得到的效果下图所示。
<