HTML <video> 元素 - 视频嵌入元素

HTML Video 元素（<video>）将支持视频播放的媒体播放器嵌入到文档中。您也可以使用 <video> 作为音频内容，但 <audio> 元素可以提供更好的用户体验。

播放一段视频：

<video width="320" height="240" controls>
  <source src="/examples/movie.mp4"  type="video/mp4">
  <source src="/examples/movie.ogg"  type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

尝试一下 »

特性

内容类别	流式内容，短语内容，嵌入内容。如果有 controls 属性：交互内容和可触知内容。
允许的内容	如果元素有 src 属性：零到多个 <track> 元素，后面跟着不包含媒体元素的透明内容模型 - 即除了 <audio> 或 <video>。否则：零到多个 <source> 个元素，后面跟着零到多个 <track> 元素，然后是不包含媒体元素的透明内容模型 - 即除了 <audio> 或<video>。
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	任何接受嵌入内容的内容。
允许的 ARIA 角色	application
DOM 接口	HTMLVideoElement

属性

该元素包含了全局属性。

autoplay

布尔属性；如果指定了该属性，视频会自动开始播放，而不用等到数据加载完成才开始。

网站自动播放音频（或具有音轨的视频）的话，可能会给用户带来不愉快的体验，因此应尽可能避免。如果您必须提供自动播放功能，您应该设置为可选的（要求用户专门启用它）。但是，如果是先创建了该元素，稍后在用户控制下设置了源地址才自动播放，则该属性会很有帮助。

要禁用视频自动播放，设置 autoplay="false" 会不起作用；如果该视频的属性存在于 <video> 标签中，该视频将自动播放。要删除自动播放，需要完全删除该属性。

buffered

你可以通过该属性读取已缓冲的资源的时间段信息。此属性包含 TimeRanges 对象。

controls

如果设置了该属性，则浏览器将提供允许用户控制视频播放，包括音量，寻找和暂停/恢复播放的控制面板。

crossorigin

此枚举属性表示是否必须使用 CORS 来完成相关图像的读取。启用 CORS 的图像在 <canvas> 元素中可以重复使用，而不会被"被污染"。允许的值有：

• anonymous
  执行一个跨域的请求（比如，有 Origin: HTTP 头），但是没有发送证书（比如，没有 cookie，没有 X.509 证书，没有 HTTP 基本的授权认证）。如果服务器没有给源站证书（没有设置 Access-Control-Allow-Origin: HTTP头），图像会被污染而且它的使用会被限制。

• use-credentials
  执行一个跨域的请求（比如，有 Origin: HTTP 头），有发送证书（比如，cookie, 证书，HTTP 基本的授权认证）。如果服务器没有给源站发送证书（通过 Access-Control-Allow-Credentials: HTTP 头），图像将会被污染，且它的使用会受限制。

当未设置该属性时，不使用 CORS 发起请求（例如，不会发送 Origin: HTTP 头），从而防止其污染 <canvas> 元素的使用。如果属性的值是无效的，则当做 anonymous 来处理。更多信息，请查看 CORS 设置的属性 。

height

视频显示区域的高度，以CSS 像素表示。 - （仅限绝对值。不支持百分比）

loop

布尔属性；如果设置了，将在到达视频结束后自动回到开始（即，循环播放）。

muted

布尔属性，指示视频中包含的音频的默认设置。如果设置了，则音频初始化时为静音。其默认值为 false，这意味着音频将在视频播放时播放。

played

一个 TimeRanges 对象，指示已播放的视频的所有范围。

preload

该枚举属性旨在让开发者向浏览器提供其认为是最好用户体验的加载方式。它可以是以下值之一：

• none：表示视频不应该被预加载；
• metadata：表示仅获取视频元数据（例如长度）；
• auto：表示整个视频文件可以下载，即使用户不期望使用它；
• 空字符串: 等同于 auto 值。

如果未设置，其默认值由浏览器定义的（即每个浏览器可能有自己的默认值）。其规范建议将其设置为 metadata。

使用注意：

• autoplay 属性优先于 preload。如果设置了 autoplay，则显然浏览器需要下载视频。
• 规范没有强制浏览器去遵循该属性的值；这只是一个提示。

poster

指示要在用户播放之前显示的海报帧的 URL。如果未指定该属性，则在第一帧可用之前不显示任何内容；否则第一帧被显示为海报。

src

要嵌入的视频的网址。这是可选的；您可以使用视频块中的 <source> 元素来指定要嵌入的视频。

width

视频显示区域的宽度，以CSS 像素表示。 - （仅限绝对值。不支持百分比）

playsinline

一个布尔属性，指示视频将以 “内嵌” 方式播放，即在该元素的播放区域内播放。请注意，未设置该属性并不意味着视频将始终以全屏播放。

事件属性

<video> 元素支持 HTML 的事件属性。

使用注意

• <video> 元素可以包含一个或多个视频源。要指定视频源，请使用 src 属性或 <source> 元素; 浏览器会选择最合适的一个。有关支持的格式列表，请参阅音频和视频元素支持的媒体格式。
• 您可以使用 object-position 属性来调整元素框架中视频的位置，以及 object-fit 属性来控制视频大小以适合框架大小。

更多实例

简单视频例子

<video src="videofile.webm" autoplay poster="posterimage.jpg">
抱歉，您的浏览器不支持嵌入的视频，
但不用担心，您可以<a href="videofile.webm">下载</a>
并用你最喜欢的视频播放器观看它！
</video>

上面的实例播放视频时，一旦接收到足够多的视频数据就开始播放，而不用暂停来下载完整视频后才开始播放。在视频开始播放之前，图像 “posterimage.jpg” 将显示在其位置上。

带有字幕的视频

<!-- Video with subtitles -->
<video src="foo.webm">
  <track kind="subtitles" src="foo.en.vtt" srclang="en"
    label="English">
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv"
    label="Svenska">
</video>

上面的实例允许用户选择不同的字幕。

多个来源的实例

这个实例为媒体提供了三个不同的来源；这允许无论浏览器支持哪些视频编解码器都可以观看视频；首先尝试了 WebM。如果无法播放，则尝试 MP4。最后，将尝试 OGG。

<video width="480" controls
  poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm"
    type="video/webm">
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4"
    type="video/mp4">
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv"
    type="video/ogg">
  您的浏览器不支持 HTML5 视频标签。
</video>

服务器支持

如果视频的 MIME 类型未在服务器上正确设置，则视频可能不会显示或显示包含 X 的灰色框（如果启用了 JavaScript）。

如果你提供的视频是 Ogg Theora 格式的，在 Apache Web 服务器上， 你可以通过 “/etc/apache” 中的 “mime.types” 文件 或者通过 “httpd.conf” 中的 “AddType” 配置指令，把视频文件的扩展名（最常见的是 “.ogm”，“.ogv” 或 “.ogg”）添加到 MIME 类型 "video/ogg" 中， 来解决这个问题。

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

如果你以 WebM 格式提供视频，在 Apache Web 服务器上，你可以通过 “/etc/apache” 中的 “mime.types” 文件，或者通过在 “httpd.conf” 中的 “AddType ” 配置指令，把视频文件的扩展名（最常见的是 “.webm” ）添加到 MIME 类型 "video/webm" 中，来解决这个问题。

AddType video/webm .webm

你的 web 主机也可能会提供一个简单的接口来修改 MIME 类型配置。

规范

规范	状态	备注
HTML Living Standard <video> 的定义	现行的标准	-

HTML 4.01 与 HTML5 之间的差异

<video> 元素是 HTML5 的新元素。

桌面浏览器兼容性

移动浏览器兼容性

1. 仅适用于仅适用于没有声音或禁用音轨的视频。

相关链接

• 在其框架内定位和调整图片大小：object-position 和 object-fit
• <audio>