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>
亲自试一试 »
<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>
亲自试一试 »
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 视频标签。
</video>
自动播放属性在 iPad 和 iPhone 等移动设备中不起作用。
浏览器支持
表中的数字指定完全支持 video 的第一个浏览器版本。
| 元素 | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML Video 视频格式
有三种支持的视频格式：MP4、WebM和Ogg。浏览器对不同格式的支持是：
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
HTML Video - 媒体类型
| 文件格式 | 媒体类型 |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML Video - 方法、属性和事件
HTML <video> 定义元素的方法、属性和事件。
这允许您加载、播放和暂停视频，以及设置持续时间和音量。
还有一些 DOM 事件可以在视频开始播放、暂停等时通知您。
有关完整的DOM参考，请转到 HTML Audio/Video DOM 参考手册。
HTML Video 标签
| 标签 | 描述 |
|---|---|
| <video> | 定义视频或电影 |
| <source> | 为媒体元素定义多个媒体资源，例如 <video> 和 <audio> |
| <track> | 定义媒体播放器中的文本曲目 |
