HTML5新增video和audio标签
video
概念
HTML 元素 用于在 HTML 或者 XHTML(可扩展超文本标记语言) 文档中嵌入媒体播放器，用于支持文档内的视频播放。
也可以将 标签用于音频内容，但是 元素可能在用户体验上更合适。
注意：在不支持 video 元素的浏览器中，
标签中间的内容会显示，作为降级处理。
属性
类似于所有其他 HTML 元素，video 元素也支持 全局属性。
src
要嵌到页面的视频的 URL。
也可以使用 video 块内的
元素来指定需要嵌到页面的视频。
语法：
height
视频显示区域的高度，单位是 px。
注意：只支持绝对值，不支持百分比（%）。
语法：
width
视频显示区域的高度，单位是 px。
注意：只支持绝对值，不支持百分比（%）。
语法：
autoplay
自动播放。
语法：
注意：在某些浏览器中（如：Chrome），需要设置 muted 属性（静音）自动播放才生效。
controls
在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
语法：
loop
在视频播放结束的时候，自动返回视频开始的地方，继续播放。（循环播放）
语法：
muted
初始化为静音播放。（不设置默认有声音）
语法：
poster
海报帧图片 URL，用于在视频处于下载中的状态时显示。
如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报帧来显示。
语法：
preload
该枚举属性旨在提示浏览器，作者认为在播放视频之前，加载哪些内容会达到最佳的用户体验。可能是下列值之一：
- none：表示不应该预加载视频。
- metadata：表示仅预先获取视频的元数据（例如长度）。
- auto：表示可以下载整个视频文件，即使用户不希望使用它。
- “”：和值为 auto 一致。每个浏览器的默认值都不相同，即使规范建议设置为
metadata。
注意：autoplay 属性的优先级比 preload 高。如果制定了 autopaly 属性，浏览器显然需要开始下载视频以便回放。
语法：
crossorigin
该枚举属性指明是否使用 CORS（跨域资源共享）来获取相关视频。允许 CORS 的资源 可在 元素中被重用，而不会被污染。允许的值如下：
-
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 请求，保证其在 元素中使用时不会被污染。
如果指定非法值，会被当作指定了枚举关键字 anonymous 一样使用。
语法：
事件
- 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 格式的视频。（可以通过在
| 浏览器 | 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 videoa> instead.p>
video>
audio
概念
HTML 元素用于在文档中嵌入音频内容。
元素可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者
属性
该元素包含 全局属性。
src
要嵌到页面的视频的 URL。
也可以使用 audio块内的
元素来指定需要嵌到页面的视频。
语法：
autoplay
自动播放。
语法：
controls
提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。
语法：
loop
在视频播放结束的时候，自动返回视频开始的地方，继续播放。（循环播放）
语法：
muted
初始化为静音播放。（不设置默认有声音）
语法：
poster
海报帧图片 URL，用于在视频处于下载中的状态时显示。
如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报帧来显示。
语法：
preload
该枚举属性旨在提示浏览器，作者认为在播放视频之前，加载哪些内容会达到最佳的用户体验。可能是下列值之一：
- none：表示不应该预加载视频。
- metadata：表示仅预先获取视频的元数据（例如长度）。
- auto：表示可以下载整个视频文件，即使用户不希望使用它。
- “”：和值为 auto 一致。每个浏览器的默认值都不相同，即使规范建议设置为
metadata。
注意：autoplay 属性的优先级比 preload 高。如果制定了 autopaly 属性，浏览器显然需要开始下载视频以便回放。
语法：
currentTime（只读）
当前播放的位置（单位为秒）。
duration（只读）
音频在时间轴中的持续时间（总长度），以秒为单位。
crossorigin
该枚举属性指明是否使用 CORS（跨域资源共享）来获取相关视频。允许 CORS 的资源 可在 元素中被重用，而不会被污染。允许的值如下：
-
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 请求，保证其在 元素中使用时不会被污染。
如果指定非法值，会被当作指定了枚举关键字 anonymous 一样使用。
语法：
事件
- 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：由于暂时缺少数据，播放已停止。
示例
浏览器对 文件类型 和 音频编码 的支持各有不同，你可以使用内嵌的
<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 audioa> instead.p>
audio>