- 您好！欢迎来到鲲鹏知舟
HTML <video> 视频标签
HTML 5 也支持 <video> 标签。HTML 视频标签用于流式传输视频文件，例如网页上的电影剪辑、歌曲剪辑。
目前，HTML 视频标签支持三种视频格式：
mp4
webM
ogg
让我们看看定义哪个 Web 浏览器支持视频文件格式的表格。
| 浏览器 | mp4 | webM | ogg |
|---|---|---|---|
 IE浏览器 | yes | no | no |
 谷歌浏览器 | yes | yes | yes |
 火狐浏览器 | yes | yes | yes |
 歌剧 | no | yes | yes |
 苹果Safari | yes | no | no |
Android 还支持 mp4 格式。
HTML 视频标签示例
让我们看看使用 HTML 视频标签播放 mp4 文件的代码。
<!DOCTYPE> <html> <body> <video controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the html video tag. </video> </body> </html>
让我们看看使用 HTML 视频标签播放 ogg 文件的示例。
<video controls> <source src="movie.ogg" type="video/ogg"> Your browser does not support the html video tag. </video>
HTML 视频标签的属性
让我们看看 HTML 5 视频标签属性列表。
| 属性 | 描述 |
|---|---|
| controls | 它定义了与播放/暂停按钮一起显示的视频控件。 |
| height | 它用于设置视频播放器的高度。 |
| width | 它用于设置视频播放器的宽度。 |
| poster | 它指定不播放视频时在屏幕上显示的图像。 |
| autoplay | 它指定视频一准备好就开始播放。 |
| loop | 它指定视频文件将在每次完成时重新开始。 |
| muted | 它用于使视频输出静音。 |
| preload | 它指定页面加载时上传视频文件的作者视图。 |
| src | 它指定视频文件的源 URL。 |
HTML 视频标签属性示例
让我们看看 HTML 中的视频标签示例，其中使用了高度、宽度、自动播放、控件和循环属性。
<!DOCTYPE> <html> <body> <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> </body> </html>
HTML 视频格式的 MIME 类型
下面给出了可用的 MIME 类型 HTML 视频标签。
| 视频格式 | MIME 类型 |
|---|---|
| mp4 | video/mp4 |
| ogg | video/ogg |
| webM | video/webM |
支持浏览器
| 元素 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <video> | Yes | Yes | Yes | Yes | Yes |
-
使用社交账号登录,本站支持
全部评论(0)