<video>: 视频嵌入元素
Baseline 广泛可用 *
<video> HTML 元素将支持视频播放的媒体播放器嵌入到文档中。你也可以将 <video> 用于音频内容，但 <audio> 元素可能提供更合适的用户体验。
试一试
<video controls width="250">
<source src="/shared-assets/videos/flower.webm" type="video/webm" />
<source src="/shared-assets/videos/flower.mp4" type="video/mp4" />
Download the
<a href="/shared-assets/videos/flower.webm">WEBM</a>
or
<a href="/shared-assets/videos/flower.mp4">MP4</a>
video.
</video>
上面的示例展示了如何使用 <video> 元素。与 <img> 元素类似，我们在 src 属性中包含要显示的媒体路径；我们可以包含其他属性来指定信息，例如视频的宽度和高度，是否希望它自动播放和循环，或者显示浏览器的默认视频控件等等。
在开标签和闭标签 <video></video> 之间的内容会作为不支持该元素的浏览器中的备用内容显示。
属性
与所有其他 HTML 元素一样，此元素支持全局属性。
autoplay-
一个布尔属性；如果指定，视频将一能播放就自动开始播放，而无需停止以完成数据加载。
注意：现代浏览器会阻止音频（或带有未静音音轨的视频）自动播放，因为自动播放音频的网站可能会给用户带来不愉快的体验。有关如何正确使用自动播放的更多信息，请参阅我们的自动播放指南。
要禁用视频自动播放，
autoplay="false"将不起作用；如果<video>标签中存在该属性，视频将自动播放。要移除自动播放，需要完全移除该属性。 controls-
如果此属性存在，浏览器将提供控件，允许用户控制视频播放，包括音量、快进/快退以及暂停/恢复播放。
controlslist-
当指定
controlslist属性时，它有助于浏览器选择在浏览器显示自己的控件集（即，指定了controls属性时）时，为video元素显示哪些控件。允许的值为
nodownload、nofullscreen和noremoteplayback。如果想禁用画中画模式（和控件），请使用
disablepictureinpicture属性。 crossorigin-
此枚举属性指示是否使用 CORS 获取相关的视频。支持 CORS 的资源可以在
<canvas>元素中重复使用而不会被污染。允许的值为anonymous-
发送不带凭据的跨域请求。换句话说，它发送
Origin:HTTP 头，但不带 cookie、X.509 证书或执行 HTTP Basic 身份验证。如果服务器不向源站点提供凭据（通过不设置Access-Control-Allow-Origin:HTTP 头），则资源将被污染，其使用将受到限制。 use-credentials-
发送带凭据的跨域请求。换句话说，它发送
Origin:HTTP 头，带 cookie、证书或执行 HTTP Basic 身份验证。如果服务器不向源站点提供凭据（通过Access-Control-Allow-Credentials:HTTP 头），则资源将被污染，其使用将受到限制。
如果不存在，则在没有 CORS 请求的情况下（即，不发送
Origin:HTTP 头）获取资源，从而阻止其在<canvas>元素中不被污染地使用。如果无效，则按使用枚举关键字anonymous处理。有关更多信息，请参阅 CORS 设置属性。 disablepictureinpicture-
阻止浏览器在某些情况下建议画中画上下文菜单或自动请求画中画。
disableremoteplayback-
一个布尔属性，用于禁用通过有线（HDMI、DVI 等）和无线技术（Miracast、Chromecast、DLNA、AirPlay 等）连接的设备中的远程播放功能。
在 Safari 中，你可以使用
x-webkit-airplay="deny"作为备用方案。 heightloop-
一个布尔属性；如果指定，浏览器将在视频播放结束时自动重新播放。
muted-
一个布尔属性，指示视频中包含的默认音频静音设置。如果设置，音频将最初静音。其默认值为
false，表示视频播放时将播放音频。 playsinline-
一个布尔属性，指示视频应“内联”播放，即在元素的播放区域内播放。请注意，缺少此属性并不意味着视频将始终全屏播放。
poster-
视频下载时要显示的图片 URL。如果未指定此属性，则在第一个帧可用之前不显示任何内容，然后显示第一个帧作为海报帧。
preload-
此枚举属性旨在向浏览器提供一个提示，说明作者认为哪种内容加载方式能在视频播放前带来最佳的用户体验。它可能具有以下值之一
none：表示视频不应预加载。metadata：表示仅获取视频元数据（例如，长度）。auto：表示可以下载整个视频文件，即使预计用户不会使用它。- 空字符串：
auto值的同义词。
每个浏览器的默认值都不同。规范建议将其设置为
metadata。备注
autoplay属性优先于preload。如果指定了autoplay，浏览器显然需要开始下载视频进行播放。- 规范并未强制浏览器遵循此属性的值；它只是一个提示。
src-
要嵌入的视频的 URL。这是可选的；你可以改为在视频块内使用
<source>元素来指定要嵌入的视频。 width
事件
audioprocess已弃用-
ScriptProcessorNode的输入缓冲区已准备好进行处理。 canplay-
浏览器可以播放媒体，但估计加载的数据不足以播放到媒体结束而无需停止进一步缓冲内容。
canplaythrough-
浏览器估计它可以播放媒体直到结束，而无需停止缓冲内容。
完成-
OfflineAudioContext的渲染已终止。 durationchange-
duration属性已更新。 emptied-
媒体已变为空；例如，如果媒体已加载（或部分加载），并且调用
load()方法重新加载它，则会发送此事件。 ended-
由于媒体播放结束，播放已停止。
error-
获取媒体数据时发生错误，或者资源的类型不是支持的媒体格式。
loadeddata-
媒体的第一帧已加载完成。
loadedmetadata-
元数据已加载。
loadstart-
当浏览器开始加载资源时触发。
pause-
播放已暂停。
play-
播放已开始。
playing-
由于数据不足而暂停或延迟后，播放已准备好开始。
progress-
浏览器加载资源时定期触发。
ratechange-
播放速率已更改。
seeked-
快进/快退操作完成。
seeking-
快进/快退操作开始。
stalled-
用户代理正在尝试获取媒体数据，但数据意外地没有到达。
suspend-
媒体数据加载已暂停。
timeupdate-
currentTime属性指示的时间已更新。 volumechange-
音量已更改。
waiting-
由于暂时缺少数据，播放已停止。
用法说明
浏览器并不都支持相同的视频格式；你可以在嵌套的 <source> 元素中提供多个源，然后浏览器将使用它理解的第一个源。
<video controls>
<source src="myVideo.webm" type="video/webm" />
<source src="myVideo.mp4" type="video/mp4" />
<p>
Your browser doesn't support HTML video. Here is a
<a href="myVideo.mp4" download="myVideo.mp4">link to the video</a> instead.
</p>
</video>
当使用 <source> 元素时，浏览器会按顺序尝试加载每个源。如果某个源失败（例如，由于无效 URL 或不支持的格式），则尝试下一个源，依此类推。如果所有源都失败，则在 <video> 元素上触发 error 事件；error 事件不会在每个单独的 <source> 元素上触发。
我们提供了关于媒体文件类型和视频支持的编解码器的实质性且全面的指南。还提供了可与它们一起使用的音频编解码器指南。
其他使用注意事项
- 如果你不指定
controls属性，视频将不包含浏览器的默认控件；你可以使用 JavaScript 和HTMLMediaElementAPI 创建自己的自定义控件。有关更多详细信息，请参阅创建跨浏览器视频播放器。 - 为了精确控制你的视频（和音频）内容，
HTMLMediaElements 会触发许多不同的事件。除了提供可控性之外，这些事件还允许你监控媒体的下载和播放进度，以及播放状态和位置。 - 你可以使用
object-position属性调整视频在元素帧内的定位，以及object-fit属性控制视频大小如何调整以适应帧。 - 要随视频显示字幕/隐藏式字幕，你可以使用一些 JavaScript 以及
<track>元素和 WebVTT 格式。有关更多信息，请参阅为 HTML 视频添加字幕和隐藏式字幕。 - 你可以使用
<video>元素播放音频文件。这很有用，例如，如果你需要播放带有 WebVTT 文本内容的音频，因为<audio>元素不允许使用 WebVTT 字幕。 - 为了在支持该元素的浏览器上测试备用内容，你可以将
<video>替换为不存在的元素，例如<notavideo>。
关于使用 HTML <video> 的一个很好的通用信息来源是HTML 视频和音频初学者教程。
使用 CSS 样式
<video> 元素是一个替换元素——它的 display 值默认为 inline——但它在视口中的默认宽度和高度由嵌入的视频定义。
对于 <video> 的样式设置没有特殊考虑；一种常见的策略是为其提供 display 值为 block，以便更容易定位、调整大小等，然后根据需要提供样式和布局信息。视频播放器样式基础提供了一些有用的样式技术。
添加字幕和其他定时文本轨道
用于字幕、隐藏式字幕、章节标题等的定时文本轨道可以通过嵌套 <track> 元素以声明方式添加。轨道在 Web Video Text Tracks File Format (WebVTT)（.vtt 文件）中指定。
例如，下面的 HTML 包含文件“captions.vtt”，如果用户启用了字幕，该文件将用于在视频上叠加隐藏式字幕。
<video controls src="video.webm">
<track default kind="captions" src="captions.vtt" />
</video>
定时文本轨道也可以使用 WebVTT API 通过编程方式添加。
检测轨道的添加和移除
你可以使用 addtrack 和 removetrack 事件来检测何时将轨道添加到或从 <video> 元素中移除。但是，这些事件不会直接发送到 <video> 元素本身。相反，它们会发送到 <video> 元素的 HTMLMediaElement 中与添加到元素的轨道类型对应的轨道列表对象
HTMLMediaElement.audioTracks-
一个
AudioTrackList，包含所有媒体元素的音轨。向此对象添加addtrack侦听器，以在新音轨添加到元素时收到通知。 HTMLMediaElement.videoTracks-
一个
VideoTrackList，包含所有媒体元素的视频轨道。向此对象添加addtrack侦听器，以在视频轨道添加到元素时收到通知。 HTMLMediaElement.textTracks-
一个
TextTrackList，包含所有媒体元素的文本轨道（用于字幕、隐藏式字幕等）。向此对象添加addtrack侦听器，以在文本轨道添加到元素时收到通知。
例如，要检测何时将音轨添加到或从 <video> 元素中移除，你可以使用以下代码
const elem = document.querySelector("video");
elem.audioTracks.onaddtrack = (event) => {
trackEditor.addTrack(event.track);
};
elem.audioTracks.onremovetrack = (event) => {
trackEditor.removeTrack(event.track);
};
此代码监视音轨何时添加到或从元素中移除，并调用轨道编辑器上的假定函数来注册和从编辑器的可用轨道列表中移除轨道。
你还可以使用 addEventListener() 来监听 addtrack 和 removetrack 事件。
服务器对视频的支持
如果服务器上未正确设置视频的 MIME 类型，视频可能不会显示，或者显示一个包含 X 的灰色框（如果启用了 JavaScript）。
如果你使用 Apache Web 服务器来提供 WebM 视频，你可以通过将视频文件类型扩展名添加到 video/webm MIME 类型（最常见的 WebM 文件扩展名是 .webm）来解决此问题。为此，请编辑 /etc/apache 中的 mime.types 文件，或在 httpd.conf 中使用 AddType 配置指令
AddType video/webm .webm
你的网络主机可能会为新技术提供一个简单的 MIME 类型配置更改界面，直到全球更新自然发生。
无障碍
视频应提供准确描述其内容的字幕和文字记录（有关如何实现这些内容的更多信息，请参阅为 HTML 视频添加字幕和隐藏式字幕）。字幕允许听力受损的人在视频播放时理解视频的音频内容，而文字记录允许需要额外时间的人以适合自己的速度和格式查看音频内容。
值得注意的是，虽然你可以为纯音频媒体添加字幕，但你只能在 <video> 元素中播放音频时这样做，因为该元素的视频区域用于呈现字幕。这是在视频元素中播放音频的特殊场景之一。
如果使用自动字幕服务，务必检查生成的内容，以确保它准确地代表了源视频。
除了对话，字幕和文字记录还应识别传达重要信息的音乐和音效。这包括情感和语气
14 00:03:14 --> 00:03:18 [Dramatic rock music] 15 00:03:19 --> 00:03:21 [whispering] What's that off in the distance? 16 00:03:22 --> 00:03:24 It's… it's a… 16 00:03:25 --> 00:03:32 [Loud thumping] [Dishes clattering]
字幕不应遮挡视频的主要内容。它们可以使用align VTT 提示设置进行定位。
示例
单一源
此示例在激活时播放视频，为用户提供浏览器的默认视频控件以控制播放。
HTML
<!-- Basic video example -->
<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
<!-- Poster from peach.blender.org -->
<video
controls
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
width="620">
Sorry, your browser doesn't support embedded videos, but don't worry, you can
<a href="https://archive.org/details/BigBuckBunny_124">download it</a>
and watch it with your favorite video player!
</video>
结果
在视频开始播放之前，在 poster 属性中提供的图像会显示在其位置。如果浏览器不支持视频播放，则显示备用文本。
多个源
此示例在前一个示例的基础上，为媒体提供了三种不同的来源；这使得无论浏览器支持哪种视频编解码器，都可以观看视频。
HTML
<!-- Using multiple sources as fallbacks for a video tag -->
<!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org -->
<!-- Poster hosted by Wikimedia -->
<video
width="620"
controls
poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
<source
src="https://archive.org/download/ElephantsDream/ed_hd.avi"
type="video/avi" />
<source
src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
type="video/mp4" />
Sorry, your browser doesn't support embedded videos, but don't worry, you can
<a
href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
download="ed_1024_512kb.mp4">
download the MP4
</a>
and watch it with your favorite video player!
</video>
结果
首先尝试 AVI。如果无法播放，则尝试 MP4。如果不支持视频元素，则显示备用消息，但如果所有源都失败，则不显示。
某些媒体文件类型允许你使用 codecs 参数作为文件类型字符串的一部分提供更具体的信息。例如，video/webm; codecs="vp8, vorbis" 表示该文件是一个 WebM 视频，使用 VP8 进行视频编码，使用 Vorbis 进行音频编码。
技术摘要
| 内容类别 |
流内容、短语内容、嵌入内容。如果它具有 controls 属性：交互式内容和可感内容。 |
|---|---|
| 允许内容 |
如果元素具有 否则：零个或多个 |
| 标签省略 | 无，起始标签和结束标签都必须存在。 |
| 允许父级 | 任何接受嵌入内容的元素。 |
| 隐式 ARIA 角色 | 没有对应的角色 |
| 允许的 ARIA 角色 | application |
| DOM 接口 | HTMLVideoElement |
规范
| 规范 |
|---|
| HTML # 视频元素 |
浏览器兼容性
加载中…