video元素與audio元素
1、video元素與audio元素的基礎(chǔ)知識(shí)
video元素
--在HTML5中專門(mén)用來(lái)播放網(wǎng)絡(luò)上的視頻或者電影钮糖。
audio元素
--在HTML5中專門(mén)用來(lái)播放網(wǎng)絡(luò)上的音頻。
使用video和audio元素進(jìn)行播放時(shí)就不在需要使用其他的插件了茫叭，只要我們的瀏覽器支持HTML5就可以了会烙！
瀏覽器的支持：
Safari3以上、Firefox4以上韭赘、0pera10以上缩滨、chrome3.0以上版本都對(duì)audio元素和video元素支持！
使用方法
audio元素只需要給他指定一個(gè)src屬性：
<audio src="MP3.mp3" controls="controls"></audio>
對(duì)于不支持的瀏覽器我們可以在這對(duì)元素之間加入提示語(yǔ)句來(lái)代替
<audio src="MP3.mp3" controls="controls">您的瀏覽器不支持Audio元素</audio>
video元素要設(shè)定好長(zhǎng)寬和src屬性就可以了：
<video width="750" height="400" src="time.mp4"></video>
同樣對(duì)于不支持video的瀏覽器可以在中間加入替換文字：
<video width="750" height="400" src="time.mp4">您的瀏覽器不支持video元素</video>
source元素指定多個(gè)播放格式與編碼：
source元素可以為同一個(gè)媒體數(shù)據(jù)指定多個(gè)播放格式與編碼方式泉瞻，以確保瀏覽器可以從中選擇一種自己支持的播放格式進(jìn)行播放脉漏。選擇順序自上而下，直到選擇到所支持的格式為止袖牙。
使用方法：
<video>
<source src="video.m4v" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
<source src="video.mp4" />
</video>
各種設(shè)備對(duì)編碼格式的支持情況：
webm(.webm)格式的視頻 火狐4.0+侧巨、chrome6.0+、opera10.6+
mp4(.m4v)格式的視頻 IE9.0+ 鞭达、Safari3.1+ 司忱、iso5.0 皇忿、Android4.0+
ogg(.ogv)格式的視頻 火狐3.5+、chrome3.0+坦仍、opera10.5+
mp4(.mp4)格式的視頻 IE9.0+ 鳍烁、Safari3.1+ 、iso3.0 繁扎、Android2.3+
2幔荒、viedo與audio的常用屬性
audio元素和video元素的常用屬性
src屬性：
在這個(gè)屬性里面指定媒體數(shù)據(jù)的URL地址。
controls屬性：
指定是否為視頻或者音頻數(shù)據(jù)添加瀏覽器自帶的播放控制條梳玫，控制條中有播放按鈕爹梁、暫停等按鈕。
使用方法：
<video src="video.mp4" controls="controls"></video>
width和height屬性（video獨(dú)有）：
指定視頻的寬度與高度提澎。
使用方法：
<video src="video.mp4" width="650" height="450"></video>
autoplay屬性：
這個(gè)屬性指定是否當(dāng)我們網(wǎng)頁(yè)加載完成之后就開(kāi)始自動(dòng)播放姚垃。
preload屬性：
這個(gè)屬性指定是否對(duì)數(shù)據(jù)進(jìn)行預(yù)加載，如果是的話虱朵，瀏覽器會(huì)將視頻數(shù)據(jù)或者音頻數(shù)據(jù)進(jìn)行緩沖莉炉，這樣做可以加快播放的速度。
preload屬性的三個(gè)值：
none 表示不進(jìn)行預(yù)加載碴犬。
metadata 表示只預(yù)加載媒體的元數(shù)據(jù)絮宁。
auto(默認(rèn)值) 表示預(yù)加載全部的視頻或者音頻。
使用方法：
<video src="video.mp4" preload="auto" ></video>
poster屬性（video獨(dú)有）：
當(dāng)視頻不可以播放的時(shí)候服协，使用poster元素向用戶展示一張圖片代替視頻绍昂。
使用方法：
<video src="video.mp4" poster="video.jpg"></video>
loop屬性：
指定是否循環(huán)播放視頻或者音頻數(shù)據(jù)。
使用方法：
<video src="video.mp4" autoplay="auto" loop="loop"></video>
error屬性：
讀取過(guò)程中一旦發(fā)生錯(cuò)誤偿荷，返回一個(gè)Media Error對(duì)象窘游，這個(gè)對(duì)象的code返回對(duì)應(yīng)的錯(cuò)誤狀態(tài)，默認(rèn)情況下video和audio的error屬性都是null跳纳。
4種錯(cuò)誤狀態(tài)忍饰，返回一個(gè)數(shù)字值，它表示音頻/視頻的錯(cuò)誤狀態(tài)：
1 = MEDIA_ERR_ABORTED - 取回過(guò)程被用戶中止
2 = MEDIA_ERR_NETWORK - 當(dāng)下載時(shí)發(fā)生錯(cuò)誤
3 = MEDIA_ERR_DECODE - 當(dāng)解碼時(shí)發(fā)生錯(cuò)誤
4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 媒體不可用或者不支持音頻/視頻
讀取錯(cuò)誤狀態(tài)示例
<video id="video" src="video.mp4"></video>
<script type="text/javascript">
var video = document.getElementById('video');
video.addEventListener("error",function(){
var error = video.error;
switch (error.code){
case 1:
alert('取回過(guò)程被用戶中止寺庄。');
break;
case 2:
alert('當(dāng)下載時(shí)發(fā)生錯(cuò)誤艾蓝。');
break;
case 3:
alert('當(dāng)解碼時(shí)發(fā)生錯(cuò)誤。');
break;
case 4:
alert('媒體不可用或者不支持音頻/視頻斗塘。');
break;
}
},false);
</script>
networkState屬性：
networkState 屬性返回音頻/視頻的當(dāng)前網(wǎng)絡(luò)狀態(tài)（activity）
4種錯(cuò)誤狀態(tài)赢织，表示音頻/視頻元素的當(dāng)前網(wǎng)絡(luò)狀態(tài)：
0 = NETWORK_EMPTY - 音頻/視頻尚未初始化
1 = NETWORK_IDLE - 音頻/視頻是活動(dòng)的且已選取資源，但并未使用網(wǎng)絡(luò)
2 = NETWORK_LOADING - 瀏覽器正在下載數(shù)據(jù)
3 = NETWORK_NO_SOURCE - 未找到音頻/視頻來(lái)源
networkState屬性：
networkState 屬性返回音頻/視頻的當(dāng)前網(wǎng)絡(luò)狀態(tài)（activity）
3馍盟、video與audio的4種方法
video元素和audio元素的4種方法
play方法：
使用play方法來(lái)播放媒體于置，自動(dòng)將元素的paused屬性的值變成false。
pause方法：
使用pause方法來(lái)暫停播放贞岭，自動(dòng)將元素的paused屬性的值變成true八毯。
load方法：
使用load方法來(lái)重新載入媒體進(jìn)行播放搓侄，自動(dòng)將元素的playbackRate屬性的值變成defaultPlaybackRate屬性的值，自動(dòng)把error的值變成null宪彩。
canPlayType方法：
使用canPlayType方法來(lái)測(cè)試瀏覽器是否支持指定的媒體類型休讳。
使用方法如下：
var support = videoElment.canPlayType(type);
canPlayType() 方法可返回下列值之一：
"probably" - 瀏覽器最可能支持該音頻/視頻類型
"maybe" - 瀏覽器也許支持該音頻/視頻類型
"" - （空字符串）瀏覽器不支持該音頻/視頻類型
