<video>

版本：HTML5

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

浏览器支持


IE 9+、Firefox、Opera、Chrome 和 Safari 都支持<video>标签。
注释：IE 8 或更早版本的 IE 浏览器不支持`<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>

标签定义及使用说明

<video>标签定义视频，比如电影片段或其他视频流。
可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
目前，<video>元素支持三种视频格式：MP4、WebM、Ogg。

浏览器并不是都支持相同的视频格式，所以你可以在<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 和HTMLMediaElementAPI 来创建你自己的控件。详情请见Creating a cross-browser video player。
HTMLMediaElement会激活许多不同的事件，以便于让你可以控制视频（和音频）内容。
你可以用CSS 属性object-position来调整视频在元素内部的位置，它可以控制视频尺寸适应于元素外框的方式。
如果想在视频里展示字幕或者标题，你可以在<track>元素和WebVTT格式的基础上使用 JavaScript 来实现。详情请见Adding captions and subtitles to HTML5 video。

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

属性

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

autoplay如果这个bool数值被指定了autoplay，视频就会开始自动播放，而且无需停止加载任何数据。
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.withOrigin: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类型的值，表示偏移的秒数。

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

属性

属性	值	描述
autoplay	true \| false	如果是 true，则视频在就绪后马上播放。
controls	true \| false	如果是 true，则向用户显示控件，比如播放按钮。
end	numeric value	定义播放器在视频流中的何处停止播放。默认地，声音会播放到结尾。
height	pixels	设置视频播放器的高度。
loopend	numeric value	定义在视频流中循环播放停止的位置，默认是 end 属性的值。
loopstart	numeric value	定义在视频流中循环播放的开始位置。默认是 start 属性的值
playcount	numeric value	定义视频片段播放多少次。默认是 1。
poster	url	在视频播放之前所显示的图片的 URL。
src	url	要播放的视频的 URL。
start	numeric value	定义播放器在音频流中开始播放的位置。默认地，声音在开头进行播放。
width	pixels	设置视频播放器的宽度。

可选属性

属性	值	描述
autoplay HTML5新增	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls HTML5新增	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height HTML5新增	pixels	设置视频播放器的高度。
loop HTML5新增	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted HTML5新增	muted	如果出现该属性，视频的音频输出为静音。
poster HTML5新增	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload HTML5新增	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。
src HTML5新增	URL	要播放的视频的 URL。
width HTML5新增	pixels	设置视频播放器的宽度。

服务器支持

如果视频的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类型配置，直到服务器全面升级。

音频格式的 MIME 类型

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/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 4.01 与 HTML 5 之间的差异

<video>标签是 HTML 5 的新标签。

事件

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

全局属性

<video>标签支持HTML 的全局属性。

事件属性

<video>标签支持HTML 的事件属性。

例子

<video src="somevideo.wmv">您的浏览器不支持 video 标签。</video>

播放录像：

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>