★文章内容学习来源：拉勾教育大前端就业集训营
多媒体标签
- 多媒体标签包含两个，具体如下：
- 音频：
<audio> - 视频：
<video> - 使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的 flash 和其他浏览
器插件。 - 本篇文章目录：
一、<audio> 音频标签
- HTML5 在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的。
| 格式 | MIME-type | IE9 | Firefox3.5 | Opera10.5 | Chrome3.0 | Safari3.0 |
| Ogg | audio/ogg | | √ | √ | √ | |
| MP3 | audio/mpeg | √ | | | √ | √ |
| Wav | audio/wav | | √ | √ | | √ |
| 属性 | 值 | 描述 |
autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。（在HTML5中如果标签的属性名与属性值相等，则可以省略属性值不写，但是为了页面错误较少，还是写出来） |
loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。 |
src | url | （必须有）要播放的音频的 URL。 |
<audio src="文件地址" controls="controls"></audio>
<audio controls="controls" >
<source src="happy.mp3" type="audio/mpeg">
<source src="happy.ogg" type="audio/ogg">
您的浏览器不支持audio标签播放音频标签
</audio>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio</title>
</head>
<body>
<audio controls>
<source src="media/snow.mp3" type="audio/mpeg">
<source src="media/snow.pgg" type="audio/ogg">
您的浏览器版本过低，不支持音频播放
</audio>
</body>
</html>
二、<video> 视频标签
- HTML5 在不使用插件的情况下也可以原生的支持视频格式文件的播放，当然支持格式是有
限的。 - 视频格式
| 格式 | MIME-type | IE | Firefox | Opera | Chrome | Safari |
| Ogg | video/ogg | × | 3.5+ | 10.5+ | 5.0+ | × |
| MP4 | video/mp4 | 9.0+ | × | × | 5.0+ | 3.0+ |
| WebM | video/webm | × | 4.0+ | 10.6+ | 6.0+ | × |
| 属性 | 值 | 描述 |
autoplay | autoplay | 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题） |
controls | controls | 向用户显示播放控件 |
loop | loop | 放完是否继续播放该视频，循环播放 |
preload | auto（预先加载视频） | 提前预加载，规定是否预加载视频(如果有了autoplay 就忽略该属性） |
none（不应加载视频） | 规定是否预加载视频(如果有了autoplay 就忽略该属性） | |
src | url | 视频url地址 |
width | pixels(像素) | 设置播放器宽度 |
height | pixels(像素) | 设置播放器高度 |
poster | Imgurl | 加载等待的画面图片 |
muted | muted | 静音播放 |
<video src="文件地址" controls="controls"></video>
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg">
<source src="move.mp4" type="video/mp4">
您的浏览器不支持video播放视频标签
</video>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>video</title>
</head>
<body>
<video controls width="200px">
<source src="media/video.mp4" type="video/mp4">
<source src="media/video.ogg" type="video/ogg">
您的浏览器版本过低，不支持 video 视频标签
</video>
</body>
</html>
三、总结
- 音频标签和视频标签使用基本一致；
- 浏览器支持情况不同；
- 我们可以给视频标签添加
muted 属性进行自动静音播放视频，音频不可以； - 视频标签是重点，我们经常设置自动播放，循环和设置大小属性，不使用
controls 控件。
下篇继续：
【50】HTML5 （4）——HTML5 新增表单标签
查看21道真题和解析