audio、video

audio和video是H5提供的音视频播放的标准接口，没有之前用的是Flash player插件（独立于浏览器的应用程序，需要安装）。

不用Flash的原因：

1. 浏览器本身不带有Flash player，体积大，安装时间长

2. 性能差，加载资源时间长

3. 安全性差，因为Flash可以对接操作系统，又是作用于互联网的，黑客就可以利用Flash进入用户的操作系统中

4. 跟新和补丁

Viedo

支持OGG（视频格式：theora & 音频格式：vorbis；支持浏览器：Firefox / Opera / Chrome）、MPEG4（h264 & aac ; IE / Chrome / Safari）、WEBM（vp8&vorbis；Firefox / Opera / Chrome）

一般用MP4即可

<video src="1.mp4" controls="controls" id="vd" width="300"></video>

属性：

兼容性：

video允许多个source存在，浏览器会选择第一个可识别的样式

<video controls="controls">
	<source src="1.mp4" type="video/mp4">
	<source src="1.ogg" type="video/ogg">
	<source src="1.webm" type="video/webm">
	您的浏览器不支持Video标签
</video>

js设置的属性和方法

video其实也是由构造函数构造出来的（HTMLVideoElement），里面包含很多属性和方法

1. load：重新加载视频资源

oLoadBtn.onclick = function() {
	oVd.load(); 
}

2. play /pause： 播放 / 暂停

3. paused：为真的时候，说明视频已暂停

oPlayAndPause.onclick = function() {
	if (oVd.paused) {
		oVd.play();
	} else {
		oVd.pause();
	}
}

4. currentTime：获取当前进度条的时间，以s为单位

oGetCurrentTime.onclick = function() {
	console.log(oVd.currentTime);
}

5. duration：获取视频总长度 oVd.duration

6. muted：静音

oSetMuted.onclick = function() {
	if (oVd.muted) {
		oVd.muted = false;
	} else {
		oVd.muted = true; //
	}
}

7. volume：调整声音大小（0.0-1.0）

oSetVolume.onclick = function() {
	console.log(oVd.volume); //获取
	oVd.volume = 0.4; //设置
	console.log(oVd.volume);
}

8. playbackRate：设置倍速

oSetPlayrate.onclick = function() {
	oVd.playbackRate = 2; //倍速
	console.log(oVd.playbackRate);
}

9. buffered：缓冲

oVd.addEventListener('play', function() {
	console.log('oVd.buffered.end(0), oVd.duration');
}, false);

事件

1. canplay：可以播放

2. ended：视频结束，可以做自动播放下一个视频的效果

3. error：出错

4. play：视频播放时触发

5. seeked：用户改变进度条

6. seeking：用户正在拖动进度条的时候响应

7. ratechange：改变倍速

8. volumechange：改变声音大小

9. waiting：正在加载

Audio

支持OGG（vorbis）、MP3（aac）、WAV，支持浏览器情况如上，一般用MP3即可

audio和video都差不多，就是没有宽高

自定义视频控件

步骤：

1. 定义好静态样式
2. 设置插件的配置，先把该设置的配置信息挂在this上，然后setOptions()
3. 设置播放按钮的功能playVideo()，在playing状态下，把状态设置为播放（setVideoState）
4. 设置时间setTime()，其中还要把时间转化一下timeFormat()，然后视频总时长等视频可以播放之后才能设置视频信息_canplay()；currentTime要在视频播放的时候_playing()，一遍播放一遍获取时间
5. 设置倍速setPlayRate()，先做showRateList（点击展示RateList，鼠标移出时隐藏）
6. 点击音量按钮（btnSetVolumn），根据情况做出相对应的功能：一开始点击音量键，显示音量条（volumeBarShow）；再次点击，静音，让音量归0（setMuted，setVolume）；再次点击，音量恢复。鼠标移出音量区域时隐藏音量条
7. 全屏（setFullScreen），直接用div全屏就好，涉及的方法：requestFullscreen、exitFullscreen
8. 视频提示信息：loading图标，waiting的时候显示，canplay和playing的时候移除；error、结束的时候的图标
9. 改变视频src，改变完之后，重新load，之后就需要loadstart事件，在加载loading图标
10. 5s后隐藏标题和进度条（showControlBar），鼠标在视频上移动的时候再显示（绑定mousemove事件、setControlBar）
11. 音量滑块，按下原点时触发（mousedown - slideVolumnVar），在mousedown事件中绑定mousemove和mouseup事件，才能做拖拽效果。mousemove中计算音量条的高度（鼠标按下时的位置 - 鼠标移动时的位置 + 音量条原本的高度）、用比例设置音量大小；mouseup解除事件绑定
12. 进度条，先做缓冲条（在canplay事件中，用计时器检测buffered，之后按比例赋值给缓冲条长度即可），进度条同样用计时器和比例做
13. 点击进度条（progressClick），切换视频的位置，修改视频播放时间、播放按钮状态（抽象成一个函数setPlayProgress）
14. 拖动进度条progressChange（mousedown）

可以自己写，但是一般都用videojs