这篇翻译不完整。请帮忙从英语翻译这篇文章

HTML <video> 元素 用于在HTML或者XHTML文档中嵌入媒体播放器,用于支持文档内的视频播放。你也可以将 <video>  标签用于音频内容,但是 <audio> 元素可能在用户体验上更合适。

这个交互式例子的源码储存在GitHub仓库上,如果你想要参与到这个交互式例子的项目中来
并做出自己的一份贡献,请克隆 https://github.com/mdn/interactive-examples并发送给我们一个拉取请求

上面的例子展示了 <video> 元素的用法。和 <img> 元素的使用类似,在 src 属性里加入一个我们需要展示的视频地址,同时也可以用其他属性来定义视频的宽度高度、是否自动或者循环播放、是否展示浏览器默认的视频控件等信息。

在 <video></video> 标签中间的内容,是针对浏览器不支持此元素时候的降级处理。

浏览器并不是都支持相同的视频格式,所以你可以在 <source> 元素里提供多个视频源,然后浏览器将会使用它所支持的第一个源。

<video controls>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is
     a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>

其他的使用注意事项:

  • 如果你没有指定 controls 属性,那么视频不会展示浏览器自带的控件,你也可以用 JavaScript 和 HTMLMediaElement API 来创建你自己的控件。详情请见Creating a cross-browser video player
  • HTMLMediaElement 会激活许多不同的事件,以便于让你可以控制视频(和音频)内容。
  • 你可以用CSS 属性 object-position 来调整视频在元素内部的位置,它可以控制视频尺寸适应于元素外框的方式。
  • 如果想在视频里展示字幕或者标题,你可以在 <track> 元素和 WebVTT 格式的基础上使用 JavaScript 来实现。详情请见 Adding captions and subtitles to HTML5 video

此外这里还有一份很棒的关于“视频和音频内容”的初学者材料,收集了很多的基本知识。

属性

就像其他的HTML元素一样,这个元素也同样支持全局属性。

autoplay

如果这个bool数值被指定了autoplay,视频就会开始自动播放,而且无需停止加载任何数据。

允许内容 流式内容, 包含任一 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 假如用户想自动播放视频,那么很明显浏览器需要下载视频。同时设置autoplaypreload属性在规范里是允许的。
  • 规范没有强制浏览器去遵循该属性的值;这仅仅只是个提示。
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 接口。

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
videoChrome Full support 3Edge Full support YesFirefox Full support 3.5IE Full support 9Opera Full support 10.5Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
autoplayChrome Full support 3Edge Full support YesFirefox Full support 3.5IE Full support 9Opera Full support 10.5Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 10
Notes
Full support 10
Notes
Notes Only available for videos that have no sound or have the audio track disabled.
Samsung Internet Android Full support Yes
bufferedChrome ? Edge Full support YesFirefox Full support 4IE ? Opera Full support YesSafari ? WebView Android ? Chrome Android ? Firefox Android Full support 4Opera Android Full support YesSafari iOS ? Samsung Internet Android ?
controlsChrome Full support 3Edge Full support YesFirefox Full support 3.5IE Full support 9Opera Full support 10.5Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
crossoriginChrome ? Edge Full support YesFirefox Full support 12IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android Full support 14Opera Android ? Safari iOS ? Samsung Internet Android ?
heightChrome Full support 3Edge Full support YesFirefox Full support 3.5IE Full support 9Opera Full support 10.5Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
intrinsicsize
ExperimentalNon-standard
Chrome Full support 71
Disabled
Full support 71
Disabled
Disabled From version 71: this feature is behind the #enable-experimental-productivity-features preference. To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox ? IE No support NoOpera Full support 58Safari No support NoWebView Android Full support 71
Disabled
Full support 71
Disabled
Disabled From version 71: this feature is behind the #enable-experimental-productivity-features preference.
Chrome Android Full support 71
Disabled
Full support 71
Disabled
Disabled From version 71: this feature is behind the #enable-experimental-productivity-features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android ? Opera Android Full support 50Safari iOS No support NoSamsung Internet Android Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the #enable-experimental-productivity-features preference.
loopChrome Full support 3Edge Full support YesFirefox Full support 11IE Full support 9Opera Full support 10.5Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 14Opera Android Full support YesSafari iOS Full support 6Samsung Internet Android Full support Yes
mutedChrome Full support 30Edge Full support YesFirefox Full support 11IE Full support 10Opera Full support YesSafari Full support 5WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 14Opera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes
playedChrome ? Edge Full support YesFirefox Full support 15IE ? Opera Full support YesSafari ? WebView Android ? Chrome Android ? Firefox Android Full support 15Opera Android Full support YesSafari iOS ? Samsung Internet Android ?
posterChrome Full support 3Edge Full support YesFirefox Full support 3.6IE Full support 9Opera Full support 10.5Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
preloadChrome Full support 3
Notes
Full support 3
Notes
Notes Defaults to metadata in Chrome 64.
Edge Full support YesFirefox Full support 4IE Full support 9Opera Full support Yes
Notes
Full support Yes
Notes
Notes Defaults to metadata in Opera 51.
Safari Full support 3.1WebView Android Full support Yes
Notes
Full support Yes
Notes
Notes Defaults to metadata in Chrome 64.
Chrome Android Full support Yes
Notes
Full support Yes
Notes
Notes Defaults to metadata in Chrome 64.
Firefox Android Full support 4Opera Android Full support Yes
Notes
Full support Yes
Notes
Notes Defaults to metadata in Opera 51.
Safari iOS Full support YesSamsung Internet Android Full support Yes
srcChrome Full support 3Edge Full support YesFirefox Full support 3.5IE Full support 9Opera Full support 10.5Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
widthChrome Full support 3Edge Full support YesFirefox Full support 3.5IE Full support 9Opera Full support 10.5Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

另请参阅

文档标签和贡献者

最后编辑者: DonSen,