HTML 视频

视频

实例

亲自试一试

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> 元素的第一个浏览器版本。

HTML 视频格式

支持的视频格式有三种：MP4、WebM 和 Ogg。浏览器对不同格式的支持情况如下：

HTML 视频 - 媒体类型

HTML 视频 - 方法、属性和事件

HTML DOM 为 <video> 元素定义了方法、属性和事件。

这允许您加载、播放和暂停视频，以及设置时长和音量。

还有一些 DOM 事件可以在视频开始播放、暂停等时通知您。

示例：使用 JavaScript

亲自试一试

有关完整的 DOM 参考，请访问我们的 HTML 音频/视频 DOM 参考。

HTML 视频标签

如需查看所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考手册。