video
概念
HTML <video> 元素 用于在 HTML 或者 XHTML(可扩展超文本标记语言) 文档中嵌入媒体播放器，用于支持文档内的视频播放。
也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。
注意：在不支持 video 元素的浏览器中，
<video></video>标签中间的内容会显示，作为降级处理。
属性
类似于所有其他 HTML 元素，video 元素也支持 全局属性。
src
要嵌到页面的视频的 URL。
也可以使用 video 块内的
<source>元素来指定需要嵌到页面的视频。
语法：<video src="url"></video>
height
视频显示区域的高度，单位是 px。
注意：只支持绝对值，不支持百分比（%）。
语法：<video height="100px"></video>
width
视频显示区域的高度，单位是 px。
注意：只支持绝对值，不支持百分比（%）。
语法：<video width="100px"></video>
autoplay
自动播放。
语法：<video autoplay></video>
注意：在某些浏览器中（如：Chrome），需要设置 muted 属性（静音）自动播放才生效。
controls
在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
语法：<video controls></video>
loop
在视频播放结束的时候，自动返回视频开始的地方，继续播放。（循环播放）
语法：<video loop></video>
muted
初始化为静音播放。（不设置默认有声音）
语法：<video muted></video>
poster
海报帧图片 URL，用于在视频处于下载中的状态时显示。
如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报帧来显示。
语法：<video poster="url"></video>
preload
该枚举属性旨在提示浏览器，作者认为在播放视频之前，加载哪些内容会达到最佳的用户体验。可能是下列值之一：
- none：表示不应该预加载视频。
- metadata：表示仅预先获取视频的元数据（例如长度）。
- auto：表示可以下载整个视频文件，即使用户不希望使用它。
- “”：和值为 auto 一致。每个浏览器的默认值都不相同，即使规范建议设置为
metadata。
注意：autoplay 属性的优先级比 preload 高。如果制定了 autopaly 属性，浏览器显然需要开始下载视频以便回放。
语法：<video preload="none"></video>
crossorigin
该枚举属性指明是否使用 CORS（跨域资源共享）来获取相关视频。允许 CORS 的资源 可在 <canvas> 元素中被重用，而不会被污染。允许的值如下：
-
anonymous：在发送跨域请求时不携带凭证（credential）信息。
浏览器在发送 HTTP 请求时，请求头不会携带 cookie、X.509 安全令牌、也不会执行任何 HTTP 基本身份验证。如果服务器没有给予源站点信任（也就是说没有设置
Access-Control-Allow-Origin:HTTP 响应首部），图像会被 污染，并且它的使用会受到限制。 -
use-credentials：在发送跨域请求时携带凭证（credential）信息。
浏览器在发送 HTTP 请求时，请求头会携带 cookie、X.509 安全令牌、也不会执行任何 HTTP 基本身份验证。如果服务器没有给予源站点信任（也就是说没有设置
Access-Control-Allow-Origin:HTTP 响应首部），图像会被 污染，并且它的使用会受到限制。
不加 crossorigin 属性时，获取资源不会使用 CORS 请求，保证其在 <canvas> 元素中使用时不会被污染。
如果指定非法值，会被当作指定了枚举关键字 anonymous 一样使用。
语法：<audio crossorigin="anonymous"></audio>
事件
- canplay：不需要缓存全部的视频内容，直接开始播放。
- canplaythrough：需要缓存全部的视频内容，才开始播放。
- complete：OfflineAudioContext 渲染完成。
- durationchange：duration 属性的值改变时触发。
- emptied：媒体内容变为空。
- ended：视频停止播放，因为 media 已经到达结束点。
- loadeddata：media 中的首帧已经完成加载。
- loadedmetadata：已加载元数据。
- play：播放已开始。
- pause：播放已暂停。
- playing：由于缺乏数据而暂停或延迟后，播放准备开始。
- progress：在浏览器加载资源时周期性触发。
- ratechange：播放速率发生变化。
- seeking：跳帧操作开始。
- seeked：跳帧操作完成。
- stalled：用户代理正在尝试获取媒体数据，但数据意外未出现。
- suspend：媒体数据加载已暂停。
- timeupdate：currentTime 属性指定的时间发生变化。
- volumechange：音量发生变化。
- waiting：由于暂时缺少数据，播放已停止。
示例
不同浏览器所支持的视频格式各不相同，但 mp4 格式是几乎所有浏览器都支持的，所以尽量使用 mp4 格式的视频。（可以通过在 <source> 元素里提供多个视频源，然后浏览器将会使用它所支持的第一个源）
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| IE | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES | YES | YES |
<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>
audio
概念
<audio> HTML 元素用于在文档中嵌入音频内容。
<audio> 元素可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者 <source> 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。
属性
该元素包含 全局属性。
src
要嵌到页面的视频的 URL。
也可以使用 audio块内的
<source>元素来指定需要嵌到页面的视频。
语法：<audiosrc="url"></audio>
autoplay
自动播放。
语法：<audio autoplay></audio>
controls
提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。
语法：<audio controls></audio>
loop
在视频播放结束的时候，自动返回视频开始的地方，继续播放。（循环播放）
语法：<audio loop></audio>
muted
初始化为静音播放。（不设置默认有声音）
语法：<audio muted></audio>
poster
海报帧图片 URL，用于在视频处于下载中的状态时显示。
如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报帧来显示。
语法：<audio poster="url"></audio>
preload
该枚举属性旨在提示浏览器，作者认为在播放视频之前，加载哪些内容会达到最佳的用户体验。可能是下列值之一：
- none：表示不应该预加载视频。
- metadata：表示仅预先获取视频的元数据（例如长度）。
- auto：表示可以下载整个视频文件，即使用户不希望使用它。
- “”：和值为 auto 一致。每个浏览器的默认值都不相同，即使规范建议设置为
metadata。
注意：autoplay 属性的优先级比 preload 高。如果制定了 autopaly 属性，浏览器显然需要开始下载视频以便回放。
语法：<audio preload="none"></audio>
currentTime（只读）
当前播放的位置（单位为秒）。
duration（只读）
音频在时间轴中的持续时间（总长度），以秒为单位。
crossorigin
该枚举属性指明是否使用 CORS（跨域资源共享）来获取相关视频。允许 CORS 的资源 可在 <canvas> 元素中被重用，而不会被污染。允许的值如下：
-
anonymous：在发送跨域请求时不携带凭证（credential）信息。
浏览器在发送 HTTP 请求时，请求头不会携带 cookie、X.509 安全令牌、也不会执行任何 HTTP 基本身份验证。如果服务器没有给予源站点信任（也就是说没有设置
Access-Control-Allow-Origin:HTTP 响应首部），图像会被 污染，并且它的使用会受到限制。 -
use-credentials：在发送跨域请求时携带凭证（credential）信息。
浏览器在发送 HTTP 请求时，请求头会携带 cookie、X.509 安全令牌、也不会执行任何 HTTP 基本身份验证。如果服务器没有给予源站点信任（也就是说没有设置
Access-Control-Allow-Origin:HTTP 响应首部），图像会被 污染，并且它的使用会受到限制。
不加 crossorigin 属性时，获取资源不会使用 CORS 请求，保证其在 <canvas> 元素中使用时不会被污染。
如果指定非法值，会被当作指定了枚举关键字 anonymous 一样使用。
语法：<audio crossorigin="anonymous"></audio>
事件
- audioprocess：一个
ScriptProcessorNode的输入缓冲区已经准备开始处理。 - canplay：不需要缓存全部的视频内容，直接开始播放。
- canplaythrough：需要缓存全部的视频内容，才开始播放。
- complete：OfflineAudioContext 渲染完成。
- durationchange：duration 属性的值改变时触发。
- emptied：媒体内容变为空。
- ended：视频停止播放，因为 media 已经到达结束点。
- loadeddata：media 中的首帧已经完成加载。
- loadedmetadata：已加载元数据。
- play：播放已开始。
- pause：播放已暂停。
- playing：由于缺乏数据而暂停或延迟后，播放准备开始。
- progress：在浏览器加载资源时周期性触发。
- ratechange：播放速率发生变化。
- seeking：跳帧操作开始。
- seeked：跳帧操作完成。
- stalled：用户代理正在尝试获取媒体数据，但数据意外未出现。
- suspend：媒体数据加载已暂停。
- timeupdate：currentTime 属性指定的时间发生变化。
- volumechange：音量发生变化。
- waiting：由于暂时缺少数据，播放已停止。
示例
浏览器对 文件类型 和 音频编码 的支持各有不同，你可以使用内嵌的 <source> 元素提供不同的播放源。浏览器会使用第一个它支持的播放源：
<audio controls>
<source src="myAudio.mp3" type="audio/mpeg">
<source src="myAudio.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. Here is a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>
