本篇文章给大家介绍HTML常用的多媒体标签及HTML5新增的多媒体标签，希望对需要的朋友有帮助！
HTML5新增的多媒体标签
一：视频<video>
当前<video>元素支持三种视频格式：尽量使用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新增的多媒体标签的详细内容，转载自php中文网
发表评论 取消回复