本篇文章给大家介绍html常用的多媒体标签及html5新增的多媒体标签，希望对需要的朋友有帮助！
html5新增的多媒体标签
一：视频<video></video>
当前
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| IE | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES 从Firefox21版本开始Linux系统从Firefox 30开始 | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES 从Opera25版本开始 | YES | YES |
<video controls="controls" autoplay="autoplay" muted="muted" width="500px" height="400px" loop="loop" poster="images/tudou.jpg" preload="none">
<source src="medio/mov_bbb.mp4">
<source src="medio/mov_bbb.ogg">
您的浏览器暂不支持<video>标签播放视频</video>视频
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放（谷歌浏览器需添加muted来解决自动播放问题） |
| controls | controls | 向用户显示播放控件 |
| width | pixels（像素） | 设置播放器宽度 |
| height | pixels（像素） | 播放器高度 |
| loop | loop | 循环播放 |
| src | url | 视频url地址 |
| poster | imageurl | 加载等待的话面图片 |
| muted | muted | 静音播放 |
二：音频<audio></audio>
立即学习“前端免费学习笔记（深入）”；
| 浏览器 | MP3 | Wav | Ogg |
|---|---|---|---|
| IE 9+ | YES | NO | NO |
| Chrome 6+ | YES | YES | YES |
| Firefox 3.6+ | YES | YES | YES |
| Safari 5+ | YES | YES | NO |
| Opera 10+ | YES | YES | YES |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5音频标签</title></head><body> <audio controls="controls" autoplay="autoplay" muted="muted" loop="loop"> <source src="medio/music.mp3" type="audio/mpeg"> 您的浏览器不支持audio元素</audio> </body> </html>
谷歌浏览器把音频和视频自动播放禁止了
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 自动播放 |
| controls | controls | 向用户显示播放控件 |
| loop | loop | 循环播放 |
| src | url | 视频url地址 |
| muted | muted | 静音播放 |
多媒体标签总结
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器把音频和视频自动播放禁止了
- 我们可以给视频标签加muted属性来静音播放视频，音频不可以（可以通过JavaScript来解决）
- 视频标签是重点，我们经常设置自动播放，不适用conrols控件，循环和设置大小属性
【相关推荐：css视频教程】
