知识说明：
比不上很牛的前端开发人员，但自始至终明白“万丈高楼平地起”，基础最重要，初学HTML5，稳固基础第一步，把最基本的整理下来，留下自己学习的痕迹。HTML5新增的video标签，将其属性以及API使用整理下来，无论以后用不用得到，都是自己的一笔宝贵的财富。
Video标签：
一、video支持视频格式：
以下是三种最常用的格式
1、 ogg格式：带有Theora视频编码（免费）+Vorbis音频编码的Ogg文件（免费）
支持的浏览器：firefox、chrome、opera
2、 MPEG4格式：带有H.264视频编码（收费）+AAC音频编码的MPEG4文件（收费）
支持的浏览器：safari、chrome
3、 Webm格式：带有VP8视频编码（免费）+Vorbis音频编码的WebM格式（免费）
支持的浏览器：IE、firefox、chrome、opera
优势：全免费、压缩比较好（小）、视频质量好
劣势：视频少、转码器几乎没有，不好转码
二、标签原型：
1、//指定一种视频格式，不能播就提示
代码片段：
<video src = “***.mp4” controls=”controls”>
您的浏览器不支持video标签，建议更新浏览器版本
</video>2、//给定多种视频格式，浏览器根据自身支持程度选择播放哪一种
注意：多个source标签，浏览器会从第一个开始识别，如果第一个不被识别，则会继续识别第二个；如果第一个识别成功，则会直接播放第一种格式视频
代码片段：
<video controls = “controls”>
<source src=”1.mp4” type=”video/mp4” /> //src属性写到source标签中，要指定视频的type类型，例如MP4的即为type=“video/mp4”
<source src = “2.ogg” type=”video/ogg” /> //ogg格式
<source src=”3.webm” type=”video/webm” /> //webm格式
</video>
三、标签属性：
虽然有的属性是boolean类型，但仍旧建议按照XHTML书写（属性名=”属性值”）格式，避免出现错误 （下面红色加粗的属性为常用属性）
属性 | 值 | 功能描述 |
controls | controls | 是否显示播放控件 |
autoplay | autoplay | 设置是否打开浏览器后自动播放 |
width | Pilex（像素） | 设置播放器的宽度 |
height | Pilex（像素） | 设置播放器的高度 |
loop | loop | 设置视频是否循环播放（即播放完后继续重新播放） |
preload | preload | 设置是否等加载完再播放 |
src | url | 设置要播放视频的url地址 |
poster | imgurl | 设置播放器初始默认显示图片 |
autobuffer | autobuffer | 设置为浏览器缓冲方式，不设置autoply才有效 |
四、video标签API：
Video标签也提供了比较人性化的API接口，供写JS时直接调用，方便简单
API | 事件说明 |
play | video.play(); 播放视频 |
pause | video.pause(); 暂停播放视频 |
load | video.load(); 将全部属性回复默认值，视频恢复重新开始状态 |
canPlayType | var support = videoid.canPlayType('video/mp4'); 判断浏览器是否支持当前类型的视频格式 返回值： 空字符串：不支持 Maybe：可能支持 Probably：完全支持 |
关于video标签的API在JS中用法如下：
<button onclick=”isPlay(this)”>播放</button>
<button onclick=”replay()”>重新播放</button>
<script>
var video = document.getElementById(‘video’); //括号内为video标签的id
//播放视频（点击播放按钮，后变成暂停）
function isPlay(obj)
{
If(video.paused)
{
Obj.innerHTML=”暂停”;
Video.play();
}else{
Obj.innerHTML=”播放”;
Video.pause();
}
}
//暂停播放
function replay()
{
Video.load();
}
//判断要播放的视频格式当前浏览器是否支持
function isPlayType()
{
Var support = video.canPlayType(“video/mp4”);
Console.log(support); //返回结果：空字符串、maybe（可能支持）、probably（支持）
}
</script>五、video标签API属性：
Video不仅提供了API接口，还提供了许多的API属性，方便在JS中做判断，如下：
API属性 | 事件说明 |
duration | 返回媒体的播放总时长，单位秒 |
loop | 是否循环播放 |
muted | 是否静音 |
paused | 是否暂停 |
currentTime | 当前播放时间（单位：秒） |
volume | 音量值 |
networkState | 返回当前网络状态 |
playbackRate | 播放的倍速(加速、减速播放) |
src | 当前视频源的URL |
ended | 返回当前播放是否结束标志 |
error | 返回当前播放的错误状态 |
initialTime | 返回初始播放的位置 |
mediaGroup | 当前音视频所属媒体组 (用来链接多个音视频标签) |
played | 当前播放部件已经播放的时间范围(TimeRanges对象) |
preload | 页面加载时是否同时加载音视频 |
readyState | 返回当前的准备状态 |
seekable | 返回当前可跳转部件的时间范围(TimeRanges对象) |
audioTracks | 返回可用的音轨列表（MultipleTrackList对象） |
autoplay | 媒体加载后自动播放 |
buffered | 返回缓冲部件的时间范围(TimeRanges对象) |
controller | 返回当前的媒体控制器（MediaController对象） |
controls | 显示播控控件 |
crossOrigin | CORS设置 |
currentSrc | 返回当前媒体的URL |
defaultMuted | 缺省是否静音 |
defaultPlaybackRate | 播控的缺省倍速 |
seeking | 返回用户是否做了跳转操作 |
startOffsetTime | 返回当前的时间偏移(Date对象) |
textTracks | 返回可用的文本轨迹(TextTrackList对象) |
videoTracks | 返回可用的视频轨迹(VideoTrackList对象) |
