本篇文章给大家介绍HTML常用的多媒体标签及HTML5新增的多媒体标签，希望对需要的朋友有帮助！
html5新增的多媒体标签
一：视频
当前
| 浏览器 | 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> <source> <source> 您的浏览器暂不支持<video>标签播放视频</video></source></source></video>
视频
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放（谷歌浏览器需添加muted来解决自动播放问题） |
| controls | controls | 向用户显示播放控件 |
| width | pixels（像素） | 设置播放器宽度 |
| height | pixels（像素） | 播放器高度 |
| loop | loop | 循环播放 |
| src | url | 视频url地址 |
| poster | imageurl | 加载等待的话面图片 |
| muted | muted | 静音播放 |
二：音频
| 浏览器 | 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 |
html> <meta> <title>HTML5音频标签</title> <audio> <source> 您的浏览器不支持audio元素</source></audio>
谷歌浏览器把音频和视频自动播放禁止了
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 自动播放 |
| controls | controls | 向用户显示播放控件 |
| loop | loop | 循环播放 |
| src | url | 视频url地址 |
| muted | muted | 静音播放 |
多媒体标签总结
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器把音频和视频自动播放禁止了
- 我们可以给视频标签加muted属性来静音播放视频，音频不可以（可以通过JavaScript来解决）
- 视频标签是重点，我们经常设置自动播放，不适用conrols控件，循环和设置大小属性
【相关推荐：css视频教程】
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
