HTML <video> 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。
平常若涉及到视频内容，就会使用到它。
只有一个视频的话，在\video元素中的src属性填入即可。
<video src="/video.mp4"></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>
<video controls width="250">
<source src="/media/cc0-videos/flower.webm" type="video/webm" />
<source src="/media/cc0-videos/flower.mp4" type="video/mp4" />
Download the
<a href="/media/cc0-videos/flower.webm">WEBM</a>
or
<a href="/media/cc0-videos/flower.mp4">MP4</a>
video.
</video>
这些属性是可以写在元素身上的属性。
| 属性 | 描述 |
|---|---|
| autoplay | 布尔属性；声明该属性后，视频会尽快自动开始播放，不会停下来等待数据全部加载完成。 |
| controls | 加上这个属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。 |
| crossorigin | 该枚举属性指明是否使用 CORS（跨域资源共享）来获取相关视频。允许 CORS 的资源 可在 <canvas> 元素中被重用，而不会被污染。允许的值如下：anonymous（跨域请求不验证）、use-credentials（跨域请求携带验证信息） |
| height | 视频显示区域的高度，单位是 CSS 像素（仅限绝对值；不支持百分比） |
| width | 视频显示区域的宽度，单位是 CSS 像素（仅限绝对值；不支持百分比）。 |
| loop | 布尔属性；循环播放。指定后，会在视频播放结束的时候，自动返回视频开始的地方，继续播放。 |
| muted | 布尔属性，指明在视频中音频的默认设置。 是否静音，默认false,即不静音 |
| playsinline | 布尔属性，指明视频将内联（inline）播放，即在元素的播放区域内. 请注意，没有此属性并不意味着视频始终是全屏播放的。 |
| poster | 海报帧图片 URL，用于在视频处于下载中的状态时显示。如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报（poster）帧来显示。 |
| preload | 该枚举属性旨在提示浏览器，作者认为在播放视频之前，加载哪些内容会达到最佳的用户体验。可能是下列值之一：none: 表示不应该预加载视频。metadata: 表示仅预先获取视频的元数据（例如长度）。auto: 表示可以下载整个视频文件，即使用户不希望使用它。空字符串: 和值为 auto 一致。每个浏览器的默认值都不相同，即使规范建议设置为 metadata。 |
| src | 要嵌到页面的视频的 URL。可选；你也可以使用 video 块内的 <source> 元素来指定需要嵌到页面的视频。 |
video元素的Dom对象是HTMLVideoElement类型。
HTMLVideoElement 接口提供了用于操作视频对象的特殊属性和方法。它同时还继承了HTMLMediaElement 和 HTMLElement 的属性与方法。
| 属性 | 描述 |
|---|---|
| videoHeight | 只读属性。返回一个unsigned long 值，以 CSS pixels 的单位给出视频资源的实际高度。这个值考虑了大小、对比度、明度、分辨率等，是由视频资源本身确定的。如果这个元素的 ready state 是 HAVE_NOTHING，这个属性的值为 0。 |
| videoWidth | 只读属性。返回一个unsigned long 值，以 CSS pixels 的单位给出视频资源的实际宽度。这个值考虑了大小、对比度、明度、分辨率等，是由视频资源本身确定的。如果这个元素的 ready state 是 HAVE_NOTHING，这个属性的值为 0。 |
| buffered | 只读属性。 buffered属性会告诉浏览器哪一部分的媒体已经被下载（如果浏览器支持的话），按照标准会返回一个TimeRanges对象。 |
| currentTime | double类型。 当前播放时间，单位为秒。为其赋值将会使媒体跳到一个新的时间。 |
| defaultPlaybackRate | double类型。控制媒体的播放速度。1.0 表示正常的播放速度，如果值小于 1.0，则播放速度会比”正常速度“慢，如果值大于 1.0，则播放速度会比”正常速度“快。0.0 是一个无效的值，并且会抛出 NOT_SUPPORTED_ERR 错误。 |
| duration | 只读double类型。媒体以秒为单位的总长度时间，如果媒体不可用，则为 0. 如果媒体可用，但时间长度未知，值为 NAN. 如果媒体是以 stream 形式传输并且没有预定长度，则值为 Inf。 |
| ended | 只读属性。表示媒体是否已经播放完毕。 |
| paused | 只读属性。 指示媒体元素是否被暂停。 |
| playbackRate | 当前媒体播放的速度。该值用于实现快进、慢动作等用户控制。正常播放速度乘以该值即可得到当前速度，因此 1.0 表示正常速度。如果 playbackRate 为负值，则媒体将向后播放。 |
| played | 只读属性。 媒体可被播放的范围。 TimeRanges对象。 |
| readyState | 媒体的准备状态。具体可查看 |
| volume | 表示音频的音量。值从 0.0（静音）到 1.0（最大音量）。 |
video方法也是继承了HTMLMediaElement 和 HTMLElement 的方法。
| 方法 | 作用 |
|---|---|
| canPlayType(in DOMString type) | 确定是否可以播放指定的媒体类型。 返回 ‘probably’（可以）、‘maybe’（可能可以）和空字符串（不行）。 |
| fastSeek(double time) | 跳到指定时间 |
| load() | 重置媒体元素并重新开始选择媒体资源。任何待处理的事件都会被丢弃。获取多少媒体数据仍受 preload 属性的影响。在删除任何 src 属性和源元素后代后，此方法可用于释放资源。否则，除非需要在动态变化后重新扫描源元素子元素，否则通常不需要使用此方法。 |
| pause() | 暂停播放 |
| play() | 开始播放 |
video事件大部分是从HTMLMediaElement继承的。
| 事件 | 触发时机 |
|---|---|
| canplay | 浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容。 |
| canplaythrough | 浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束。 |
| complete | OfflineAudioContext 渲染完成。 |
| durationchange | duration 属性的值改变时触发。 |
| emptied | 媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它。 |
| ended | 视频停止播放，因为 media 已经到达结束点。 |
| loadeddata | media 中的首帧已经完成加载。 |
| loadedmetadata | 已加载元数据。 |
| pause | 播放已暂停。 |
| play | 播放已开始。 |
| playing | 由于缺乏数据而暂停或延迟后，播放准备开始。 |
| progress | 在浏览器加载资源时周期性触发。 |
| ratechange | 播放速率发生变化。 |
| seeking | 跳帧（seek）操作开始。 |
| seeked | 跳帧（seek）操作结束。 |
| stalled | 正在尝试获取媒体数据，但数据意外未出现。 |
| suspend | 媒体数据加载已暂停。 |
| timeupdate | currentTime 属性指定的时间发生变化。 |
| volumechange | 音量发生变化。 |
| waiting | 由于暂时缺少数据，播放已停止。 |
video元素的出现，使得网页文档可以播放音视频，弥补了本无法播放视频的缺陷，以前使用其他插件播放（例如flash）。
它也可以替代canvas，作为WebRTC数据的载体。