知识说明：
比不上很牛的前端开发人员，但自始至终明白“万丈高楼平地起”，基础最重要，初学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对象) |