MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

引进于 HTML5

简介

HTML <video> 元素 用于在HTML或者XHTML文档中嵌入视频内容。

获取支持格式列表，请查看 audio和video元素所支持的媒体格式。

使用上下文

允许内容 流式内容, 包含任一 src 属性或是一个或多个 <source> 元素，其后紧跟流式内容 或 段落内容 ， 不包括<video> 或者 <audio> 元素。
标记省略 无，开始标签和结束标签都必须有
允许的父级元素 任何接受流式内容，或者段落内容的元素。
规范文档 HTML5, 4.8.6节

属性

类似于所有其它HTML元素，video元素支持 全局属性。

autoplay
布尔属性；指定后，视频会马上自动开始播放，不会停下来等着数据载入结束。
autobuffer
布尔属性；指定后，视频会自动开始缓存，即使没有设置自动播放。该属性适用于视频被认为可能会播放（比如，用户导航到专门播放视频的页面，而不是那种嵌入视频还有其它内容的页面）。视频会一直缓存到媒体缓存满。
实现备注： 虽然是HTML5规范的早期草案的一部分， autobuffer 属性在稍晚的版本被去掉了。 Gecko 2.0 和其它浏览器中已经移除了这个属性，而且有些浏览器中从未实现。规范定义了一个新的枚举属性， preload， 用不同的语法来取代 autobuffer 属性。 bug 548523
buffered
这个属性可以读取到哪段时间范围内的媒体被缓存了。该属性包含了一个 TimeRanges 对象。
controls
加上这个属性，Gecko 会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
crossorigin
该枚举属性指明抓取相关图片是否必须用到CORS（跨域资源共享）。 支持CORS的资源 可在 <canvas> 元素中被重用，而不会被污染。允许的值如下：
anonymous
跨域请求（即，使用 Origin: 的HTTP头）会被执行。但是不发送凭证（即，不发送cookie， X.509 证书或者 HTTP Basic 授权）。如果服务器不提供证书给源站点 (不设置 Access-Control-Allow-Origin: HTTP头)，图片会被 污染 并且它的使用会受限。
use-credentials
跨域请求A cross-origin request (i.e. with Origin: HTTP header) 会被执行，且凭证会被发送 (即， 发送一个 cookie, 一个证书和HTTP Basic授权会被执行)。如果服务器不提供证书给源站点 (通过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 和 preload属性在规范里是允许的。
  • 规范没有强制浏览器去遵循该属性的值；这仅仅只是个提示。
poster
一个海报帧的URL，用于在用户播放或者跳帧之前展示。如果属性未指定，那么在第一帧可用之前什么都不会展示；之后第一帧就像海报帧一样展示。
src
要嵌到页面的视频的URL。可选；你也可以使用video块内的 <source> 元素来指定需要嵌到页面的视频。
width
视频显示区域的宽度，单位是CSS像素。

时间偏移量目前是指定为float类型的值，表示偏移的秒数。

备注： HTML 5 规范中，时间偏移量值的定义还没有完成，有可能会变更。

事件

<video>元素可以触发许多不同的事件。

例子

<!-- Simple video example -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以 <a href="videofile.ogg">下载</a>
  并用你喜欢的播放器观看!
</video>

<!-- Video with subtitles -->
<video src="foo.ogg">
  <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" 会一直展示在视频区域，直到开始播放。

第二个例子允许用户选择不同的字幕。

服务器支持

如果视频的MIME类型设置不正确，视频可能不会显示，或者显示包含一个X的灰色盒子（如果启用了JavaScript的话）。

如果你提供的视频是Ogg Theora格式的，在Apache Web 服务器上， 你可以通过 "/etc/apache" 中的 "mime.types" 文件 或者通过在httpd.conf中的“AddType的”配置指令，把视频文件的扩展名(最常见的是".ogm", ".ogv", or ".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类型配置，直到服务器全面升级。

DOM 接口

该元素实现了 HTMLVideoElement 接口。

浏览器兼容性

特征 Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 3.0 3.5 (1.9.1) 9.0 10.5 3.1
autoplay 属性 3.0 3.5 (1.9.1) 9.0 10.5 3.1
buffered 属性 ? 4.0 (2.0) ? Yes ?
controls 属性 3.0 3.5 (1.9.1) 9.0 10.5 3.1
loop 属性 3.0 11.0 (11.0) 9.0 10.5 3.1
muted 属性 ? 11.0 (11.0) ? Yes ?
played 属性 ? 15.0 (15.0) ? Yes ?
poster 属性 3.0 3.6 (1.9.2) 9.0 10.5 3.1
preload 属性 3.0 4.0 (2.0) 9.0 Yes 3.1
src 属性 3.0 3.5 (1.9.1) 9.0 10.5 3.1
crossorigin 属性 ? 12.0 (12.0) ? ? ?
特征 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 1.0 (1.0) ? ? ?
autoplay 属性 ? 1.0 (1.0) ? ? iOS 6.0 only
buffered 属性 ? 4.0 (2.0) ? ? ?
controls 属性 ? 1.0 (1.0) ? ? ?
loop 属性 ? 11.0 (11.0) ? ? ?
muted 属性 ? 11.0 (11.0) ? ? ?
played 属性 ? 15.0 (15.0) ? ? ?
poster 属性 ? 1.0 (1.0) ? ? ?
preload 属性 ? 4.0 (2.0) ? ? ?
src 属性 ? 1.0 (1.0) ? ? ?
crossorigin 属性 ? 12.0 (12.0) ? ? ?

另请参阅

文档标签和贡献者

 此页面的贡献者： Shangxin, esterTion, jfw10973, ziyunfei, hxl
 最后编辑者: Shangxin,