HTML5之video元素
一、video元素支持的视频格式
HTML5中的video标签支持3种常用的视频格式：
1、Ogg = 带有Theora 视频编码和Vorbis 音频编码的 Ogg 文件；
2、MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件；
3、WebM = 带有VP8 视频编码和Vorbis 音频编码的WebM 文件。
浏览器支持程度：safari3+，firefox4+，Opera10+，chrome3+，IE9+等。
其他不支持视频格式可以下载转换工具进行转换。
http://www.html5videoplayer.net/
二、Video的属性及事件
src ：视频的属性
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度
error属性：在正常读取时候，使用媒体数据的过程中，video元素或audio元素的error属性为null，但是任何时候只要出现错误，error属性将返回一个MediaError对象，该对象的code返回对应的错误状态，共有4个可能值：
MEDIA_ERR_ABORTED(数字值为1)，媒体数据的下载过程由于用户的操作原因而被终止。
MEDIA_ERR_NETWORK(数字值为2)，确认媒体资源可用，但是在下载出现网络错误，媒体数据的下载过程被中止。
MEDIA_ERR_DECODE(数字值为3)，确认媒体资源可用，但是解码时发生错误。
MEDIA_ERR_SRC_NOT_SUPPORTED(数字值为4)，媒体资源不可用或媒体格式不被支持。
代码如下：
<video src="" id="videoElement"></video>
var video = document.getElementById("videoElement");
video.addEventListener("error",function(){
var error = video.error;
swicth(error.code) {
case 1:
alert("视频的下载过程被中止");
break;
case 2:
alert("网络发生故障，视频的下载过程被中止");
break;
case 3:
alert("解码失败");
break;
case 4:
alert("媒体资源不可用或媒体格式不被支持");
break;
}
},false);
networkState属性
在媒体数据加载过程中可以使用video元素或audio元素的networkState属性读取当前网络状态，共有4个可能的值；
1． NETWORK_EMPTY（数字值为0）：元素处于初始状态。
2． NETWORK_IDLE(数字值为1)，浏览器已选择好用什么编码格式来播放媒体，但是尚未建立网络连接。
3． NETWORK_LOADING(数字值为2)：媒体数据加载中
4． NETWORK_NO_SOURCE(数字值为3)，没有支持的编码格式，不执行加载。
currentTime属性与duration属性
video元素或audio元素的currentTime属性来读取媒体的当前播放位置(单位是s)，也可以通过修改currentTime属性来修改当前播放位置，如果修改的位置上没有可用的媒体数据时，将抛出INVALID_STATE_ERR异常；
video元素或audio元素的duration属性来读取媒体文件总的播放时间。
我们可以来做demo如下：
HTML代码如下：
<video id="video" controls width=640 height=360 autoplay>
<source src="Wildlife/Wildlife.ogv" type="video/ogg; codecs="theora, vorbis""/>
<source src="Wildlife/Wildlife.webm" type="video/webm" >
<source src="Wildlife/Wildlife.mp4" type="video/mp4">
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
<button onclick="getCurTime()" type="button">获得当前时间的位置</button>
<button onclick="setCurTime()" type="button">把时间位置设置为 5 秒</button>
<button onclick="duration()" type="button">读取媒体文件总的播放时间</button>
JS代码如下：
var myVid=document.getElementById("video");
function getCurTime(){
// 获得当前视频或者音频时间的位置
alert(myVid.currentTime);
}
function setCurTime(){
// 给当前的视频或者音频设置5s时间的位置
myVid.currentTime=5;
}
function duration() {
//读取媒体文件总的播放时间 单位为S
alert(myVid.duration);
}
具体参考： http://www.w3.org/2010/05/video/mediaevents.html
三、子元素source
由于不同浏览器支持播放视频格式不同，可以用video的子元素source制定多个元素，浏览器会依次往下查找到可以播放的视频源。
<video width=”320″ height=”240″>
<source src=”trailer.webm” type=’video/webm; codecs=”vp8, vorbis”‘ />
<source src=”trailer.mp4″ type=’video/mp4; codecs=”avc1.4D401E, mp4a.40.2″‘ />
<source src=“trailer.ogg” type=’video/ogg; codecs=”theora, vorbis”‘ />
</video>
来自为知笔记(Wiz)