<video> | HTML5 视频标签的定义与用法
定义与用法
<video> 标签定义网页上的视频流文件，例如电影剪辑，歌曲剪辑等。
<video> 标签是 HTML5 的新标签。
提示：可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持 <video>元素的浏览器就可以显示出该标签的信息。
目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始 |
YES | YES |
| Safari | YES | NO | NO |
| Opera | YES 从 Opera 25 版本开始 |
YES | YES |
音频格式的 MIME 类型
| 格式 | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
语法格式
<video controls>
<source src=”” type=””>
</video>
示例代码
<video width="320" height="240" controls>
<source src="/video/BigBunny5.mp4" type="video/mp4">
Your browser does not support the html video tag.
</video> 效果展示：
点击下方“阅读原文”可亲试效果
浏览器支持
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
主流浏览器都支持<video>标签。
标签属性
: HTML5新属性。
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay |
autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls |
controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height |
pixels | 设置视频播放器的高度。 |
| loop |
loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| muted |
muted | 如果出现该属性，视频的音频输出为静音。 |
| poster |
URL | 规定视频正在下载时显示的图像，直到用户点击播放按钮。 |
| preload |
auto metadata none |
如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。 |
| src |
URL | 要播放的视频的 URL。 |
| width | pixels | 设置视频播放器的宽度。 |
全局属性
<video> 标签支持HTML 的全局属性。
事件属性
<video> 标签支持HTML 的事件属性。
点击下方“阅读原文”阅览效果更佳