HTML video 标签
HTML <video> 元素
HTML <video> 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。
你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。
本页介绍的内容，源码托管在 Github 上：https://github.com/axihe/api-html/blob/master/audio-video/tag-video.html
HTML <video> 标签功能
<video> 标签定义视频，比如电影片段或其他视频流。
目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始 |
YES | YES |
| Safari | YES | NO | NO |
| Opera | YES | ||
| 从 Opera 25 版本开始 | YES | YES |
- MP4 = MPEG 4 文件使用 H264 视频编解码器和 AAC 音频编解码器
- WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
- Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis 音频编解码器
HTML <video> 标签用法
播放录像：
<video controls width="250">
<source src="/media/examples/flower.webm"
type="video/webm">
<source src="/media/examples/flower.mp4"
type="video/mp4">
您的浏览器不支持 video 标签。
</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” 会一直展示在视频区域，直到开始播放。
第二个例子允许用户选择不同的字幕。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
| Element | Chrome | IE | 火狐 | safari |
|---|---|---|---|---|
<video> |
4.0 | 9.0 | 3.5 | 4.0 |
浏览器并不是都支持相同的视频格式（参考 HTML的支持audio和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。
此外这里还有一份很棒的关于“视频和音频内容”的初学者材料，收集了很多的基本知识。
音频格式的 MIME 类型
| 格式 | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
服务器支持
如果视频的 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 类型配置，直到服务器全面升级。
HTML4 与 HTML5 之间的差异
<video> 标签是 HTML5 的新标签。
提示和注释
**提示：**可以在 <video> 和 </video> 标签之间放置文本内容；
这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。
引入html5media.js, 可以使<video>兼容低版本 IE
可选属性
New ：HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
autoplay New |
autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
controls New |
controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
height New |
pixels | 设置视频播放器的高度。 |
loop New |
loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
muted New |
muted | 如果出现该属性，视频的音频输出为静音。 |
poster New |
URL | 规定视频正在下载时显示的图像，直到用户点击播放按钮。 |
preload New |
auto meta none |
如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。 |
src New |
URL | 要播放的视频的 URL。 |
width New |
pixels | 设置视频播放器的宽度。 |
autobuffer New |
—————————- | 指定后，视频会自动开始缓存，即使没有设置自动播放 |
buffered New |
—————————- | 这个属性可以读取到哪段时间范围内的媒体被缓存了 |
controlslist New |
—————————- | Controlslist 属性将帮助浏览器选择在媒体元素上显示的控件 |
crossorigin New |
—————————- | 该枚举属性指明抓取相关图片是否必须用到 CORS（跨域资源共享） |
anonymous New |
—————————- | 跨域请求（即，使用 Origin: 的 HTTP 头）会被执行 |
use-credentials New |
—————————- | 不加这个属性时，抓取资源不会走 CORS 请求（即，不会发送 Origin: HTTP 头），保证其在 <canvas> 元素中使用时不会被污染 |
currentTime New |
—————————- | 读取 CurentTime 返回一个双精度浮点值，指示以秒为单位的媒体的当前播放位置 |
disablePictureInPicture New |
—————————- | 防止浏览器建议图片中的上下文菜单或在某些情况下自动请求图片中的图片 |
disableRemotePlayback New |
—————————- | 一个布尔属性，用于禁用使用有线连接的设备 (HDMI、DVI 等）的远程播放功能 |
duration New |
—————————- | 它指示媒体的持续时间（总长度），以秒为单位，在媒体的时间线上。 |
intrinsicsize New |
—————————- | 这个属性告诉浏览器忽略图像的实际内在大小，并假装它是属性中指定的大小 |
playsinline New |
—————————- | 一个布尔属性，标志视频将被“inline”播放，即在元素的播放区域内 |
played New |
—————————- | 一个 TimeRanges 对象，指明了视频已经播放的所有范围。 |
autoplay
布尔属性；指定后，视频会马上自动开始播放，不会停下来等着数据载入结束。
autobuffer
布尔属性；指定后，视频会自动开始缓存，即使没有设置自动播放。该属性适用于视频被认为可能会播放（比如，用户导航到专门播放视频的页面，而不是那种嵌入视频还有其它内容的页面）。视频会一直缓存到媒体缓存满。 实现备注： 虽然是 HTML5 规范的早期草案的一部分， autobuffer 属性在稍晚的版本被去掉了。 Gecko 2.0 和其它浏览器中已经移除了这个属性，而且有些浏览器中从未实现。规范定义了一个新的枚举属性， preload， 用不同的语法来取代 autobuffer 属性。 bug 548523
buffered
这个属性可以读取到哪段时间范围内的媒体被缓存了。该属性包含了一个 TimeRanges 对象。
controls
加上这个属性，Gecko 会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停 / 恢复播放。
controlslist
当浏览器显示自己的控件集（例如，当指定了 Controls 属性时），Controlslist 属性将帮助浏览器选择在媒体元素上显示的控件。
允许接受的 value 有 nodownload,nofullscreen 和 noremoteplayback
如果要禁用图片模式（和控件），请使用 disablePictureInPicture 属性。
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 设置属性 获取更多信息。
currentTime
读取 CurentTime 返回一个双精度浮点值，指示以秒为单位的媒体的当前播放位置。如果 video 尚未开始播放，则会在开始播放后返回偏移量。通过 CurentTime 将当前播放位置设置为给定时间，会在加载媒体时将媒体查找到该位置（从指定的位置开始播放）。
媒体正在播放的情况下，如果媒体缓冲区的数据已经过期（视频已经播放完），则 user agent 有可能无法正常拿到数据。有些媒体可能有一个不以 0 秒开始的媒体时间线（不是从头开始播放的），因此应该将 currentTime 的时间设置在其数据失效之前。getStartDate() 这个方法可以用来确定媒体时间线起始的坐标。
disablePictureInPicture
防止浏览器建议图片中的上下文菜单或在某些情况下自动请求图片中的图片。
disableRemotePlayback
一个布尔属性，用于禁用使用有线连接的设备 (HDMI、DVI 等）的远程播放功能。无线技术 (Miracast、Chromecast、DLNA、AirPlay 等）。 在 Safari 中，您可以使用 x-webkit-airplay=“deny”作为后盾。
duration 只读
一个双精度浮点值，它指示媒体的持续时间（总长度），以秒为单位，在媒体的时间线上。如果元素上没有媒体，或者媒体无效，则返回的值为 NaN。如果媒体没有已知终点（例如时间未知的实时流、网络广播、来自 WebRTC 的媒体等等），那么这个值就是 Infinity。
height
视频展示区域的高度，单位是 CSS 像素。
intrinsicsize
这个属性告诉浏览器忽略图像的实际内在大小，并假装它是属性中指定的大小。具体来说，图像将在这些维度上展开，图像上的 naturalWidth/naturalHeight 将返回此属性中指定的值。Explainer，examples
loop
布尔属性；指定后，会在视频结尾的地方，自动返回视频开始的地方。
muted
布尔属性，指明了视频里的音频的默认设置。设置后，音频会初始化为静音。默认值是 false, 意味着视频播放的时候音频也会播放 。
playsinline
一个布尔属性，标志视频将被“inline”播放，即在元素的播放区域内。请注意，没有此属性并不意味着视频始终是全屏播放的。
played
一个 TimeRanges 对象，指明了视频已经播放的所有范围。
preload
该枚举属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么。可能是下列值之一：
- none: 提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量；换句话说就是提示浏览器该视频不需要缓存。
- metadata: 提示尽管作者认为用户不需要查看该视频，不过抓取元数据（比如：长度）还是很合理的。
- auto: 用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。
- 空字符串：也就代指 auto 值。 假如不设置，默认值就是浏览器定义的了 （即，不同浏览器会选择自己的默认值），即使规范建议设置为 metadata。
使用备注：
autoplay 属性优先于 preload 假如用户想自动播放视频，那么很明显浏览器需要下载视频。同时设置 autoplay 和 preload 属性在规范里是允许的。 规范没有强制浏览器去遵循该属性的值；这仅仅只是个提示。
poster
一个海报帧的 URL，用于在用户播放或者跳帧之前展示。如果属性未指定，那么在第一帧可用之前什么都不会展示；之后第一帧就像海报帧一样展示。
src
要嵌到页面的视频的 URL。可选；你也可以使用 video 块内的 <source> 元素来指定需要嵌到页面的视频。
width
视频显示区域的宽度，单位是 CSS 像素。
时间偏移量目前是指定为 float 类型的值，表示偏移的秒数。
备注： HTML 5 规范中，时间偏移量值的定义还没有完成，有可能会变更。
DOM 接口
该元素实现了 HTMLVideoElement 接口。
video 标签兼容问题
使用<video>需要注意的问题：
HTML5 video 标签浏览器兼容问题 小例子
IE8、火狐、谷歌测试通过。
多种格式视频
不可以只有 MP4 格式，一定要引入 Ogg 格式视频，否则在火狐上会不兼容报错。
引入 html5media.js
引入 html5media.js, 可以使 <video> 兼容 IE
宽度不可以为百分比
如果想要设置视频宽度为百分比 % 自适应占满容器，注意 video 的属性 width 不可以为百分比 %
注意 不可以 直接在<video> 标签里面加 width = “100%"，因为<video>的属性 width 只支持像素值，不支持百分比。
虽然<video width = "100%"> 在谷歌火狐浏览器中可以正确显示，但是在 IE 中会不兼容，导致无法播放视频。
如果想要设置视频宽度为百分比 % 自适应占满容器，可以 通过内部样式<style>...</style>或外部样式<link rel="stylesheet" href="CSS文件路径" />设置，但 不可以 通过内联样式style="width:100%" 设置样式，否则不兼容 IE。
高度不要加 px
如果视频是固定宽高，则可以直接在<video>属性中设置，千万注意不要加单位 px，否则 IE 不兼容。
正确示例如下：
<video width="1000" height="500" controls autoplay="true" loop="true" preload="auto">
错误示例如下：
<video width="1000px" height="500px" controls autoplay="true" loop="true" preload="auto">
全局属性
<video> 标签支持 HTML 全局属性。
事件属性
<video> 标签支持 HTML 事件属性
