前端开发系列039-基础篇之Video基础
本文简单介绍HTML5中的video标签，包括video元素的简单介绍、基本使用以及常用事件和属性。
一、标签介绍
HTML5 规定了一种通过 Video 元素来包含视频的标准方法。
Video标签用于在浏览器中提供视频控件来播放视频，示例为：<video src="movie.ogg" controls="controls"></video>,其中controls 属性提供添加播放、暂停和音量等控制，如果当前浏览器不支持video元素则显示video标签之间的内容。
video标签的主要属性
height 约束视频的高度。
src 规定要播放的视频的 URL。
autoplay 规定视频就绪后马上开始播放（自动播放视频）。
width 约束视频的宽度。（注意：无法通过缩小视频的宽高来压缩视频）
loop 规定当视频结束后将重新开始播放 , 如果设置该属性，则视频将循环播放。
preload 规定是否在页面加载后载入视频，如果设置了 autoplay 属性，则忽略该属性。
muted 规定视频的音频输出应该被静音，在高版本浏览器中，静音可以保证视频自动播放。
controls 规定浏览器应该为视频提供播放控件包括：播放 暂停 定位 音量 全屏切换 字幕等。
preload属性的取值有三种情况
auto - 当页面加载后载入整个视频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入视频
Video元素支持三种视频格式
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
二、基本使用
video标签的使用方式相对简单，只需要在页面中指定位置插入video标签并设置必要的属性即可，下面给出一个简短的代码示例：
<video muted src="src/僵小鱼.mp4" autoplay="autoplay" width="600" controls="controls">
您当前的浏览器不支持该控件，请升级浏览器！
</video>
说明 上面的代码会在页面中插入一个宽度为600的视频控件，src属性控制的是播放视频的资源路径，autoplay表示设置自动播放，controls表示为标签提供对用的播放控件，muted属性表示设置让视频静音（自动播放必须设置该属性）。
source 元素说明
video 元素允许多个 source 元素，source 元素可以链接不同的视频文件，浏览器将使用第一个可识别格式的文件，下面给出简短的代码示例。
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持当前控件！
</video>
三、属性、方法和事件
video元素同样拥有属性、方法和事件。
video元素的方法包括播放play()、暂停pause()、加载load()
video元素的属性包括是否静音（muted）、是否自动播放（autoPlay）等，可以被读取或设置。
video元素相关的DOM 事件还能够帮我们监听视频音量改变（volumechange）、播放结束（ended）等。
下面给出一个简短的代码示例，通过按钮可以来控制视频的播放、暂停和放大缩小。
<video src="src/僵小鱼.mp4" width="600px" id="my_video"></video>
<div class="control-video">
<button id="play_pause">播放</button>
<button id="make_big">放大</button>
<button id="make_small">缩小</button>
</div>
<script>
var media = document.getElementById("my_video");
var playPauseBtn = document.getElementById("play_pause");
var makeBigBtn = document.getElementById("make_big");
var makeSmallBtn = document.getElementById("make_small");
playPauseBtn.onclick = function () {
if (media.paused)
{
this.innerHTML = "暂停";
media.play();
}else
{
this.innerHTML = "播放";
media.pause();
}
};
makeBigBtn.onclick = function () {
media.width += 50;
};
makeSmallBtn.onclick = function () {
media.width -= 50;
}
</script>
video元素的属性列表
readyState 当前状态
paused 是否暂停
controls 是否有默认控制条
currentSrc 当前资源的URL路径
src 设置或返回资源的URL
startTime 开始时间，通常为0
volume 音量,可以设置（0~1）
ended 是否结束，布尔类型值
autoPlay 是否自动播放，布尔类型值
loop 是否循环播放，布尔类型值
muted 是否静音，布尔类型值，可以设置
error 错误信息，null表示正常
buffered 返回已缓冲区域，TimeRanges
seeking 是否正在seeking（查找）
currentTime 当前播放的位置，可以设置修改
duration 当前资源长度，流则返回无限
played 返回已经播放的区域，TimeRanges
seekable 返回可以seek的区域 TimeRanges
defaultPlaybackRate 默认的回放速度，可以设置
playbackRate 当前播放速度(比如可以设置为1.5倍速度)，可以设置
error.code 错误信息，具体的代码 1-用户终止 2-网络错误 3-解码错误 4-URL无效
preload 是否预载资源 取值情况有 none：不预载 metadata：预载资源
networkState 当前网络状态，结果为数值 0-未初始化 1-未使用网络 2-正下载 3-没找到资源
TimeRanges 区域对象
TimeRanges.length 区域段数
TimeRanges.start(index) 第index段区域的开始位置
TimeRanges.end(index) 第index段区域的结束位置
video元素的方法列表
media.play(); 播放视频
media.pause(); 暂停视频
media.load(); 重新加载src指定的资源
media.canPlayType(type); 是否能播放某种格式的资源
说明：media为获取到的页面中的video标签
video元素相关的事件
var eventTester = function(e){
Media.addEventListener(e,function(){//.....},false);
}
eventTester("loadstart"); 客户端开始请求数据
eventTester("progress"); 客户端正在请求数据
eventTester("suspend"); 延迟下载
eventTester("abort"); 客户端主动终止下载（不是因为错误引起）
eventTester("loadstart"); 客户端开始请求数据
eventTester("progress"); 客户端正在请求数据
eventTester("suspend"); 延迟下载
eventTester("abort"); 客户端主动终止下载（不是因为错误引起），
eventTester("error"); 请求数据时遇到错误
eventTester("stalled"); 网速失速
eventTester("play"); play()和autoplay开始播放时触发
eventTester("pause"); pause()触发
eventTester("loadedmetadata"); 成功获取资源长度
eventTester("loadeddata"); 成功获取数据信息
eventTester("waiting"); 等待数据，并非错误
eventTester("playing"); 开始回放
eventTester("canplay"); 可以播放，但中途可能因为加载而暂停
eventTester("canplaythrough"); 可以播放，歌曲全部加载完毕
eventTester("seeking"); 寻找中
eventTester("seeked"); 寻找完毕
eventTester("timeupdate"); 播放时间改变
eventTester("ended"); 播放结束
eventTester("ratechange"); 播放速率改变
eventTester("durationchange"); 资源长度改变
eventTester("volumechange"); 音量改变
