一、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);
}
三、子元素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>