srcmini本文概述
HTML 5也支持<video>标记。 HTML视频标签用于在网页上流传输视频文件, 例如电影剪辑, 歌曲剪辑。
当前, HTML视频标签支持三种视频格式：
- mp4
- 网络
- 奥格
让我们看一下定义哪个Web浏览器支持视频文件格式的表。
| 浏览器 | mp4 | 网络 | 奥格 |
|---|---|---|---|
| IE浏览器 | yes | no | no |
| 谷歌浏览器 | yes | yes | yes |
| 火狐浏览器 | yes | yes | yes |
| Opera | no | yes | yes |
| 苹果Safari | yes | no | no |
Android还支持mp4格式。
HTML视频标签示例
让我们看看使用HTML video标签播放mp4文件的代码。
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the html video tag.
</video>立即测试
让我们看一下使用HTML视频标签播放ogg文件的示例。
<video controls>
<source src="movie.ogg" type="video/ogg">
Your browser does not support the html video tag.
</video>支持的浏览器
| Element | Chrome | IE | Firefox | Opera | Safari |
| <video> | Yes | Yes | Yes | Yes | Yes |
HTML视频标记的属性
让我们看一下HTML 5视频标记属性的列表。
| 属性 | 描述 |
|---|---|
| controls | 它定义了用播放/暂停按钮显示的视频控件。 |
| height | 用于设置视频播放器的高度。 |
| width | 用于设置视频播放器的宽度。 |
| poster | 它指定当不播放视频时在屏幕上显示的图像。 |
| autoplay | 它指定视频将在准备就绪后立即开始播放。 |
| loop | 它指定视频文件每次完成时都将重新开始。 |
| muted | 它用于使视频输出静音。 |
| preload | 当页面加载时, 它指定作者视图以上传视频文件。 |
| src | 它指定视频文件的源URL。 |
HTML视频标签属性示例
让我们看一下使用高度, 宽度, 自动播放, 控件和循环属性的HTML视频标记示例。
<video width="320" height="240" controls autoplay loop>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the html video tag.
</video>立即测试
HTML视频格式的MIME类型
可用的MIME类型HTML视频标签如下所示。
| 影片格式 | MIME类型 |
|---|---|
| mp4 | video/mp4 |
| ogg | video/ogg |
| webM | video/webM |
评论前必须登录！
注册