首先简单的介绍一下视频格式：
早期的视频主要针对Flash <object data="movie.swf" height="200" width="200"/>
h5类似object的embed <embed src="movie.swf" height="200" width="200"/>那么问题来了： 1，如果浏览器不支持 Flash，将无法播放视频。
2，iPad 和 iPhone 不能显示 Flash 视频。
3，如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。
4，操作不够灵活
H5视频标签的使用：
<video width="800" height="400">
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object> 当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
source：拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件（如果有的话）， type告诉浏览器这个文件是什么类型的，不支持的话就直接不管了
也就是说 浏览器根据自己的支持自动判断选择视频的格式
HTML5支持的视频格式：
《video的常见属性》
属性 | 值 | 描述 |
autoplay | autoplay | 视频就绪自动播放 |
controls | controls | 向用户显示播放控件 |
width | pixels(像素) | 设置播放器宽度 |
height | pixels(像素) | 设置播放器高度 |
loop | loop | 播放完是否继续播放该视频，循环播放 |
preload | preload | 是否等加载完再播放 |
src | url | 视频url地址 |
poster | imgurl | 加载等待的画面图片 |
属性 | 说明 |
audioTracks | 返回可用的音轨列表（MultipleTrackList对象） |
autoplay | 媒体加载后自动播放 |
buffered | 返回缓冲部件的时间范围(TimeRanges对象) |
controller | 返回当前的媒体控制器（MediaController对象） |
controls | 显示播控控件 |
crossOrigin | CORS设置 |
currentSrc | 返回当前媒体的URL |
currentTime | 当前播放的时间，单位秒 |
defaultMuted | 缺省是否静音 |
defaultPlaybackRate | 播控的缺省倍速 |
属性 | 说明 |
duration | 返回媒体的播放总时长，单位秒 |
ended | 返回当前播放是否结束标志 |
error | 返回当前播放的错误状态 |
initialTime | 返回初始播放的位置 |
loop | 是否循环播放 |
mediaGroup | 当前音视频所属媒体组 (用来链接多个音视频标签) |
muted | 是否静音 |
networkState | 返回当前网络状态 |
paused | 是否暂停 |
playbackRate | 播放的倍速(加速、减速播放) |
played | 当前播放部件已经播放的时间范围(TimeRanges对象) |
preload | 页面加载时是否同时加载音视频 |
readyState | 返回当前的准备状态 |
seekable | 返回当前可跳转部件的时间范围(TimeRanges对象) |
属性 | 说明 |
seeking | 返回用户是否做了跳转操作 |
src | 当前音视频源的URL |
startOffsetTime | 返回当前的时间偏移(Date对象) |
textTracks | 返回可用的文本轨迹(TextTrackList对象) |
videoTracks | 返回可用的视频轨迹(VideoTrackList对象) |
volume | 音量值 |
事件 | 描述 |
abort | 当音视频加载被异常终止时产生该事件 |
canplay | 当浏览器可以开始播放该音视频时产生该事件 |
canplaythrough | 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件 |
durationchange | 当媒体的总时长改变时产生该事件 |
emptied | 当前播放列表为空时产生该事件 |
ended | 当前播放列表结束时产生该事件 |
error | 当加载媒体发生错误时产生该事件 |
loadeddata | 当加载媒体数据时产生该事件 |
loadedmetadata | 当收到总时长，分辨率和字轨等metadata时产生该事件 |
loadstart | 当开始查找媒体数据时产生该事件 |
事件 | 描述 |
pause | 当媒体暂停时产生该事件 |
play | 当媒体播放时产生该事件 |
playing | 当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件 |
progress | 当获取到媒体数据时产生该事件 |
ratechange | 当播放倍数改变时产生该事件 |
seeked | 当用户完成跳转时产生该事件 |
seeking | 当用户正执行跳转时操作的时候产生该事件 |
stalled | 当试图获取媒体数据，但数据还不可用时产生该事件 |
suspend | 当获取不到数据时产生该事件 |
timeupdate | 当前播放位置发生改变时产生该事件 |
volumechange | 当前音量发生改变时产生该事件 |
waiting | 当视频因缓冲下一帧而停止时产生该事件 |
方法 | 属性 paused | 事件 |
play() | currentSrc | play |
pause() | currentTime | pause |
videoWidth(视频文件的宽高，不是video标签的宽高) | timeupdate | |
videoHeight |
全屏 | 退出全屏 | |
Webkit (Safari5.1 /Chrome 15) | element.webkitRequestFullScreen(); | document.webkitCancelFullScreen(); |
Firefox (works in nightly) | element.mozRequestFullScreen(); | document.mozCancelFullScreen(); |
W3C 提议 | element.requestFullscreen(); | document.exitFullscreen(); |
