本篇文章给大家介绍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 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 | 静音播放 |
二：音频
立即学习“前端免费学习笔记（深入）”；
| 浏览器 | 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 | 静音播放 |
多媒体标签总结
【相关推荐：css视频教程】
以上就是详解HTML5新增的多媒体标签的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
203
