双恒 详解HTML5新增的多媒体标签
本篇文章给大家介绍HTML常用的多媒体标签及HTML5新增的多媒体标签，希望对需要的朋友有帮助！
HTML5新增的多媒体标签
一：视频39000f942b2545a5315c57fa3276f220
当前39000f942b2545a5315c57fa3276f220元素支持三种视频格式：尽量使用MP4格式
| 浏览器 | 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>视频<video>——常见属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放（谷歌浏览器需添加muted来解决自动播放问题） |
| controls | controls | 向用户显示播放控件 |
| width | pixels（像素） | 设置播放器宽度 |
| height | pixels（像素） | 播放器高度 |
| loop | loop | 循环播放 |
| src | url | 视频url地址 |
| poster | imageurl | 加载等待的话面图片 |
| muted | muted | 静音播放 |
二：音频<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视频教程】
以上就是详解HTML5新增的多媒体标签的详细内容，更多请关注双恒网络其它相关文章！
