HTML5新增的多媒体标签#
新增的多媒体标签主要包含两个：
- 视频<video>
- 音频<audio>
使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash或其它浏览器插件。
视频<video>#
当前<video>元素支持包含mp4、WebM、Ogg在内的三种视频格式： 尽量使用mp4格式，各大浏览器都支持
语法：#
<video src="文件地址" controls="controls"></video>
常见属性#
| 属性 | 描述 | 值 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题) |
| controls | controls | 向用户显示播放控件 |
| width | pixels(像素) | 设置播放器宽度 |
| height | pixels(像素) | 设置播放器高度 |
| loop | loop | 播放完是否继续播放该视频，循环播放 |
| preload |
auto(预先加载该视频)
none(不应加载视频) |
规定是否预加载视频(若有了autoplay，就忽略该属性) |
| src | url | 视频url地址 |
| poster | imgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
音频<audio>#
当前<audio>元素支持三种音频格式：mp3、wav、ogg 建议使用mp3格式
语法：#
<audio src="文件地址" controls="controls"></audio>
常见属性#
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 若出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 若出现该属性，则向用户展示控件，比如播放按钮。 |
| loop | loop | 若出现该属性，则每当音频结束时重新开始播放。 |
| src | url | 要播放的音频的URL |
谷歌浏览器禁止了音频和视频的自动播放
总结#
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器把音视频的自动播放禁止了
- 可以给视频标签添加muted属性来静音播放视频，音频不可以(可以通过JS解决)
- 视频标签是重点，经常设置自动播放，不使用controls控件，循环和设置大小属性