video
使用HTML 元素将视频内容嵌入到文档中。<video>
内容类别 | 流内容，短语内容，嵌入式内容。如果它具有控件属性：交互式内容和可触及的内容。 |
|---|---|
允许的内容 | 如果元素具有src属性：零个或多个<track>元素，后跟不包含媒体元素的透明内容 - 不包含<audio>或<video> Else：零个或多个<source>元素，后跟零或更多<track>元素，后面跟着不包含媒体元素的透明内容 - 不是<audio>或<video>。 |
标记遗漏 | 没有，起始和结束标签都是强制性的。 |
允许父母 | 任何接受嵌入内容的元素。 |
允许ARIA角色 | 应用 |
DOM界面 | HTMLVideoElement |
属性
像所有其他HTML元素一样，此元素支持全局属性。
autoplayBoolean属性; 如果指定，视频自动开始播放，只要它可以这样做，而不停止完成加载数据。
自动播放音频（或带有音频轨道的视频）的站点对用户来说可能是一种不愉快的体验，所以应尽可能避免。如果您必须提供自动播放功能，您应该选择启用（要求用户专门启用它）。但是，在用户控制下创建媒体元素的源将在稍后设置时，这可能很有用。
要禁用视频自动播放，autoplay="false"将不起作用; 如果该<video>标签中存在该属性，该视频将自动播放。要删除自动播放，该属性需要完全删除。
buffered您可以读取的属性来确定缓冲媒体的时间范围。该属性包含一个TimeRanges对象。controls如果此属性存在，浏览器将提供控件以允许用户控制视频播放，包括音量，搜索和暂停/恢复播放。crossorigin该枚举属性指示是否使用CORS来获取相关图像。可以在元素中重用启用CORS的资源，而<canvas>不会受到污染。允许的值为：匿名发送不带凭据的跨源请求。换句话说，它发送Origin:没有cookie，X.509证书或执行HTTP基本身份验证的HTTP头。如果服务器不向源站点提供凭据（通过不设置Access-Control-Allow-Origin:HTTP头），图像将被干扰，并且其使用受到限制.use-credentials使用凭证发送一个跨源请求。换句话说，它发送Origin:一个cookie，一个证书或执行HTTP基本认证的HTTP标头。如果服务器没有为原始站点提供凭据（通过Access-Control-Allow-Credentials:HTTP标头），则图像将受到污染并且其使用受到限制。如果不存在，则在没有CORS请求（即不发送Origin:HTTP标头）的情况下获取该资源，从而防止其未被污染的<canvas>元素使用。如果无效，则将其处理为使用枚举关键字匿名。有关更多信息，请参阅CORS设置属性。height视频显示区域的高度，英寸CSS像素。- （仅绝对值，无百分比）loop布尔属性; 如果指定，我们将在到达视频结束时自动回到起点。muted一个布尔属性，指示视频中包含的音频的默认设置。如果设置，则音频将最初静音。其默认值为false，这意味着音频将在视频播放时播放。played一个TimeRanges表示已播放的视频的所有范围对象。preload此枚举属性旨在向浏览器提供有关作者认为会导致最佳用户体验的提示。它可能具有以下值之一：
none：表示不应该预加载视频。metadata：表示仅获取视频元数据（例如长度）。auto：表示即使用户不希望使用它，也可以下载整个视频文件。- 在空字符串：在的代名词
auto值。
如果未设置，则其默认值是浏览器定义的（即每个浏览器可能具有其默认值）。该规范建议将其设置为metadata。
使用说明：
autoplay属性具有优先权preload。如果autoplay指定，浏览器显然需要开始下载视频进行播放。- 规范不强制浏览器遵循此属性的值; 这仅仅是一个暗示。
事件
<video>元素可以引发多种不同的事件。
使用说明
<video>元素包含一个或多个视频源。要指定视频源，请使用src属性或<source>元素; 浏览器会选择最合适的一个。有关支持的格式列表，请参阅音频和视频元素支持的媒体格式。
例子
<!-- Simple video example -->
<video src="videofile.webm" autoplay poster="posterimage.jpg">
Sorry, your browser doesn't support embedded videos,
but don't worry, you can <a href="videofile.webm">download it</a>
and watch it with your favorite video player!
</video>
<!-- 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>第一个示例播放视频，一旦接收到足够多的视频就开始播放，以允许播放而不会暂停下载更多视频。在视频开始播放之前，图像“posterimage.jpg”将显示在其位置上。
第二个例子允许用户在不同的字幕之间进行选择。
多个来源的例子
This example offers three different sources for the media; this allows the video to be watched regardless of which video codecs are supported by the browser; first WebM is tried. If that can't be played, then MP4 is tried. Finally, OGG is tried.
<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">
Your browser doesn't support HTML5 video tag.
</video>您可以尝试使用实时预览代码编辑器的HTML5视频演示示例上面的示例。
服务器支持
如果视频的MIME类型未在服务器上正确设置，则视频可能不会显示或显示包含X的灰色框（如果启用了JavaScript）。
如果您使用Apache Web Server为Ogg Theora视频提供服务，则可以通过将视频文件类型扩展添加到“video / ogg”MIME类型来解决此问题。最常见的视频文件类型扩展名是“.ogm”，“.ogv”或“.ogg”。为此，编辑“/ etc / apache”中的“mime.types”文件或使用httpd.conf中的“AddType”配置指令。
AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg如果您将视频作为WebM提供，则可以通过将视频文件使用的扩展名（“.webm”是最常见的扩展名）添加到MIME类型“video / webm”，通过“ mime.types“文件放入”/ etc / apache“或通过httpd.conf中的”AddType“配置指令。
AddType video/webm .webm您的Web主机可以为新技术的MIME类型配置更改提供一个简单的界面，直到自然发生全局更新。
规格
Specification | Status | Comment |
|---|---|---|
HTML Living StandardThe definition of '<video>' in that specification. | Living Standard | ? |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 3.0 | (Yes) | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
autoplay attribute | 3.0 | (Yes) | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
buffered attribute | ? | (Yes) | 4.0 (2.0) | ? | (Yes) | ? |
controls attribute | 3.0 | (Yes) | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
crossorigin attribue | ? | (Yes) | 12.0 (12.0) | ? | ? | ? |
loop attribute | 3.0 | (Yes) | 11.0 (11.0) | 9.0 | 10.5 | 3.1 |
muted attribute | 30.0 | (Yes) | 11.0 (11.0) | 10.0 | (Yes) | 5.0 |
played property | ? | (Yes) | 15.0 (15.0) | ? | (Yes) | ? |
poster attribute | 3.0 | (Yes) | 3.6 (1.9.2) | 9.0 | 10.5 | 3.1 |
preload attribute | 3.0 | (Yes) | 4.0 (2.0) | 9.0 | (Yes) | 3.1 |
src attribute | 3.0 | (Yes) | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
playsinline attribute | ? | ? | ? | ? | ? | ? |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
Basic support | ? | (Yes) | 1.0 (1.0) | ? | ? | ? |
autoplay attribute | ? | (Yes) | 1.0 (1.0) | 8.1 | ? | 10.01 |
buffered attribute | ? | (Yes) | 4.0 (2.0) | ? | ? | ? |
controls attribute | ? | (Yes) | 1.0 (1.0) | ? | ? | ? |
loop attribute | ? | (Yes) | 11.0 (11.0) | 8.0 | ? | 6.0 |
muted attribute | ? | (Yes) | 11.0 (11.0) | 8.0 | ? | ? |
played property | ? | (Yes) | 15.0 (15.0) | ? | ? | ? |
poster attribute | ? | (Yes) | 1.0 (1.0) | ? | ? | ? |
preload attribute | ? | (Yes) | 4.0 (2.0) | ? | ? | ? |
src attribute | ? | (Yes) | 1.0 (1.0) | ? | ? | ? |
crossorigin attribute | ? | (Yes) | 12.0 (12.0) | ? | ? | ? |
playsinline attribute | ? | ? | ? | ? | ? | 10.0 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
