版本：HTML5

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

浏览器支持

示例

 抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以 下载
  并用你喜欢的播放器观看!
 

标签定义及使用说明

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

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

 
your browser doesn't support html5 video. here is
     a link to the video instead.

其他的使用注意事项：

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

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

属性

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

• autoplay如果这个bool数值被指定了autoplay，视频就会开始自动播放，而且无需停止加载任何数据。
• crossorigin该枚举属性指明抓取相关图片是否必须用到CORS（跨域资源共享）。支持CORS的资源可在元素中被重用，而不会被污染。允许的值如下：
  • 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 头)，保证其在元素中使用时不会被污染。如果指定非法值，会被当作指定了枚举关键字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块内的元素来指定需要嵌到页面的视频。
• width视频显示区域的宽度，单位是CSS像素。

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

属性

可选属性

服务器支持

如果视频的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 类型

• MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
• WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
• Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

HTML 4.01 与 HTML 5 之间的差异

标签是 HTML 5 的新标签。

事件

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

全局属性

标签支持HTML 的全局属性。

事件属性

标签支持HTML 的事件属性。

例子

您的浏览器不支持 video 标签。

播放录像：

您的浏览器不支持 video 标签。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com