HTML 视频
HTML <video> 元素用于在网页上显示视频。
HTML <video> 元素
要在 HTML 中显示视频，请使用 <video> 元素
示例
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
自己试一试 »
工作原理
controls 属性添加了视频控件，如播放、暂停和音量。
始终包含 width 和 height 属性是一个好主意。 如果未设置高度和宽度，则视频加载时页面可能会闪烁。
<source> 元素允许您指定浏览器可以选择的不同视频文件。 浏览器将使用第一个识别的格式。
在 <video> 和 </video> 标签之间的文本将仅显示在不支持 <video> 元素的浏览器中。
HTML <video> 自动播放
要自动启动视频，请使用 autoplay 属性
示例
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
自己试一试 »
注意： Chromium 浏览器在大多数情况下不允许自动播放。 但是，静音自动播放始终是允许的。
在 autoplay 后添加 muted 以允许视频自动播放（但静音）
示例
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
自己试一试 »
浏览器支持
表格中的数字指定了完全支持 <video> 元素的第一个浏览器版本。
| 元素 | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML 视频格式
有三种支持的视频格式：MP4、WebM 和 Ogg。 浏览器对不同格式的支持是
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | 是 | 是 | 是 |
| Chrome | 是 | 是 | 是 |
| Firefox | 是 | 是 | 是 |
| Safari | 是 | 是 | 否 |
| Opera | 是 | 是 | 是 |
HTML 视频 - 媒体类型
| 文件格式 | 媒体类型 |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML 视频 - 方法、属性和事件
HTML DOM 为 <video> 元素定义了方法、属性和事件。
这使您可以加载、播放和暂停视频，以及设置持续时间和音量。
还有一些 DOM 事件可以通知您视频何时开始播放、暂停等。
有关完整的 DOM 参考，请访问我们的 HTML 音频/视频 DOM 参考。
HTML 视频标签
| 标签 | 描述 |
|---|---|
| <video> | 定义视频或电影 |
| <source> | 为媒体元素（如 <video> 和 <audio>）定义多个媒体资源 |
| <track> | 在媒体播放器中定义文本轨道 |
