JavaScript <video>，<audio>

概述 

<video>元素用來加載視頻，是HTMLVideoElement對(duì)象的實(shí)例。<audio>元素用來加載音頻，是HTMLAudioElement對(duì)象的實(shí)例。而HTMLVideoElement和HTMLAudioElement都繼承了HTMLMediaElement，所以這兩個(gè) HTML 元素有許多共同的屬性和方法，可以放在一起介紹。

理論上，這兩個(gè) HTML 元素直接用src屬性指定媒體文件，就可以使用了。

<audio src="background_music.mp3"/>
<video src="news.mov" width=320 height=240/>

注意，<video>元素有width屬性和height屬性，可以指定寬和高。<audio>元素沒有這兩個(gè)屬性，因?yàn)樗牟シ牌魍庑问菫g覽器給定的，不能指定。

實(shí)際上，不同的瀏覽器支持不同的媒體格式，我們不得不用<source>元素指定同一個(gè)媒體文件的不同格式。

<audio id="music">
  <source src="music.mp3" type="audio/mpeg">  
  <source src="music.ogg" type='audio/ogg; codec="vorbis"'>
</audio>

瀏覽器遇到支持的格式，就會(huì)忽略后面的格式。

這兩個(gè)元素都有一個(gè)controls屬性，只有打開這個(gè)屬性，才會(huì)顯示控制條。注意，<audio>元素如果不打開controls屬性，根本不會(huì)顯示，而是直接在背景播放。

HTMLMediaElement 接口 

HTMLMediaElement并沒有對(duì)應(yīng)的 HTML 元素，而是作為<video>和<audio>的基類，定義一些它們共同的屬性和方法。

HTMLMediaElement接口有以下屬性。

• HTMLMediaElement.audioTracks：返回一個(gè)類似數(shù)組的對(duì)象，表示媒體文件包含的音軌。
• HTMLMediaElement.autoplay：布爾值，表示媒體文件是否自動(dòng)播放，對(duì)應(yīng) HTML 屬性autoplay。
• HTMLMediaElement.buffered：返回一個(gè) TimeRanges 對(duì)象，表示瀏覽器緩沖的內(nèi)容。該對(duì)象的length屬性返回緩存里面有多少段內(nèi)容，start(rangeId)方法返回指定的某段內(nèi)容（從0開始）開始的時(shí)間點(diǎn)，end()返回指定的某段內(nèi)容結(jié)束的時(shí)間點(diǎn)。該屬性只讀。
• HTMLMediaElement.controls：布爾值，表示是否顯示媒體文件的控制欄，對(duì)應(yīng) HTML 屬性controls。
• HTMLMediaElement.controlsList：返回一個(gè)類似數(shù)組的對(duì)象，表示是否顯示控制欄的某些控件。該對(duì)象包含三個(gè)可能的值：nodownload、nofullscreen和noremoteplayback。該屬性只讀。
• HTMLMediaElement.crossOrigin：字符串，表示跨域請(qǐng)求時(shí)是否附帶用戶信息（比如 Cookie），對(duì)應(yīng) HTML 屬性crossorigin。該屬性只有兩個(gè)可能的值：anonymous和use-credentials。
• HTMLMediaElement.currentSrc：字符串，表示當(dāng)前正在播放的媒體文件的絕對(duì)路徑。該屬性只讀。
• HTMLMediaElement.currentTime：浮點(diǎn)數(shù)，表示當(dāng)前播放的時(shí)間點(diǎn)。
• HTMLMediaElement.defaultMuted：布爾值，表示默認(rèn)是否關(guān)閉音量，對(duì)應(yīng) HTML 屬性muted。
• HTMLMediaElement.defaultPlaybackRate：浮點(diǎn)數(shù)，表示默認(rèn)的播放速率，默認(rèn)是1.0。
• HTMLMediaElement.disableRemotePlayback：布爾值，是否允許遠(yuǎn)程回放，即遠(yuǎn)程回放的時(shí)候是否會(huì)有工具欄。
• HTMLMediaElement.duration：浮點(diǎn)數(shù)，表示媒體文件的時(shí)間長(zhǎng)度（單位秒）。如果當(dāng)前沒有媒體文件，該屬性返回0。該屬性只讀。
• HTMLMediaElement.ended：布爾值，表示當(dāng)前媒體文件是否已經(jīng)播放結(jié)束。該屬性只讀。
• HTMLMediaElement.error：返回最近一次報(bào)錯(cuò)的錯(cuò)誤對(duì)象，如果沒有報(bào)錯(cuò)，返回null。
• HTMLMediaElement.loop：布爾值，表示媒體文件是否會(huì)循環(huán)播放，對(duì)應(yīng) HTML 屬性loop。
• HTMLMediaElement.muted：布爾值，表示音量是否關(guān)閉。
• HTMLMediaElement.networkState：當(dāng)前網(wǎng)絡(luò)狀態(tài)，共有四個(gè)可能的值。0表示沒有數(shù)據(jù)；1表示媒體元素處在激活狀態(tài)，但是還沒開始下載；2表示下載中；3表示沒有找到媒體文件。
• HTMLMediaElement.paused：布爾值，表示媒體文件是否處在暫停狀態(tài)。該屬性只讀。
• HTMLMediaElement.playbackRate：浮點(diǎn)數(shù)，表示媒體文件的播放速度，1.0是正常速度。如果是負(fù)數(shù)，表示向后播放。
• HTMLMediaElement.played：返回一個(gè) TimeRanges 對(duì)象，表示播放的媒體內(nèi)容。該屬性只讀。
• HTMLMediaElement.preload：字符串，表示應(yīng)該預(yù)加載哪些內(nèi)容，可能的值為none、metadata和auto。
• HTMLMediaElement.readyState：整數(shù)，表示媒體文件的準(zhǔn)備狀態(tài)，可能的值為0（沒有任何數(shù)據(jù)）、1（已獲取元數(shù)據(jù)）、2（可播放當(dāng)前幀，但不足以播放多個(gè)幀）、3（可以播放多幀，至少為兩幀）、4（可以流暢播放）。該屬性只讀。
• HTMLMediaElement.seekable：返回一個(gè) TimeRanges 對(duì)象，表示一個(gè)用戶可以搜索的媒體內(nèi)容范圍。該屬性只讀。
• HTMLMediaElement.seeking：布爾值，表示媒體文件是否正在尋找新位置。該屬性只讀。
• HTMLMediaElement.src：字符串，表示媒體文件所在的 URL，對(duì)應(yīng) HTML 屬性src。
• HTMLMediaElement.srcObject：返回src屬性對(duì)應(yīng)的媒體文件資源，可能是MediaStream、MediaSource、Blob或File對(duì)象。直接指定這個(gè)屬性，就可以播放媒體文件。
• HTMLMediaElement.textTracks：返回一個(gè)類似數(shù)組的對(duì)象，包含所有文本軌道。該屬性只讀。
• HTMLMediaElement.videoTracks：返回一個(gè)類似數(shù)組的對(duì)象，包含多有視頻軌道。該屬性只讀。
• HTMLMediaElement.volume：浮點(diǎn)數(shù)，表示音量。0.0 表示靜音，1.0 表示最大音量。

HTMLMediaElement接口有如下方法。

• HTMLMediaElement.addTextTrack()：添加文本軌道（比如字幕）到媒體文件。
• HTMLMediaElement.captureStream()：返回一個(gè) MediaStream 對(duì)象，用來捕獲當(dāng)前媒體文件的流內(nèi)容。
• HTMLMediaElement.canPlayType()：該方法接受一個(gè) MIME 字符串作為參數(shù)，用來判斷這種類型的媒體文件是否可以播放。該方法返回一個(gè)字符串，有三種可能的值，probably表示似乎可播放，maybe表示無法在不播放的情況下判斷是否可播放，空字符串表示無法播放。
• HTMLMediaElement.fastSeek()：該方法接受一個(gè)浮點(diǎn)數(shù)作為參數(shù)，表示指定的時(shí)間（單位秒）。該方法將媒體文件移動(dòng)到指定時(shí)間。
• HTMLMediaElement.load()：重新加載媒體文件。
• HTMLMediaElement.pause()：暫停播放。該方法沒有返回值。
• HTMLMediaElement.play()：開始播放。該方法返回一個(gè) Promise 對(duì)象。

下面是play()方法的一個(gè)例子。

var myVideo = document.getElementById('myVideoElement');

myVideo
.play()
.then(() => {
  console.log('playing');
})
.catch((error) => {
  console.log(error);
});

HTMLVideoElement 接口 

HTMLVideoElement接口代表了<video>元素。這個(gè)接口繼承了HTMLMediaElement接口，并且有一些自己的屬性和方法。

HTMLVideoElement 接口的屬性。

• HTMLVideoElement.height：字符串，表示視頻播放區(qū)域的高度（單位像素），對(duì)應(yīng) HTML 屬性height。
• HTMLVideoElement.width：字符串，表示視頻播放區(qū)域的寬度（單位像素），對(duì)應(yīng) HTML 屬性width。
• HTMLVideoElement.videoHeight：該屬性只讀，返回一個(gè)整數(shù)，表示視頻文件自身的高度（單位像素）。
• HTMLVideoElement.videoWidth：該屬性只讀，返回一個(gè)整數(shù)，表示視頻文件自身的寬度（單位像素）。
• HTMLVideoElement.poster：字符串，表示一個(gè)圖像文件的 URL，用來在無法獲取視頻文件時(shí)替代顯示，對(duì)應(yīng) HTML 屬性poster。

HTMLVideoElement 接口的方法。

• HTMLVideoElement.getVideoPlaybackQuality()：返回一個(gè)對(duì)象，包含了當(dāng)前視頻回放的一些數(shù)據(jù)。

HTMLAudioElement 接口 

HTMLAudioElement接口代表了<audio>元素。

該接口繼承了HTMLMediaElement，但是沒有定義自己的屬性和方法。瀏覽器原生提供一個(gè)Audio()構(gòu)造函數(shù)，返回的就是HTMLAudioElement實(shí)例。

var song = new Audio([URLString]);

Audio()構(gòu)造函數(shù)接受一個(gè)字符串作為參數(shù)，表示媒體文件的 URL。如果省略這個(gè)參數(shù)，可以稍后通過src屬性指定。

生成HTMLAudioElement實(shí)例以后，不用插入 DOM，可以直接用play()方法在背景播放。

var a = new Audio();
if (a.canPlayType('audio/wav')) {
  a.src = 'soundeffect.wav';
  a.play();
}

事件 

<video>和<audio>元素有以下事件。

• loadstart：開始加載媒體文件時(shí)觸發(fā)。
• progress：媒體文件加載過程中觸發(fā)，大概是每秒觸發(fā)2到8次。
• loadedmetadata：媒體文件元數(shù)據(jù)加載成功時(shí)觸發(fā)。
• loadeddata：當(dāng)前播放位置加載成功后觸發(fā)。
• canplay：已經(jīng)加載了足夠的數(shù)據(jù)，可以開始播放時(shí)觸發(fā)，后面可能還會(huì)請(qǐng)求數(shù)據(jù)。
• canplaythrough：已經(jīng)加載了足夠的數(shù)據(jù)，可以一直播放時(shí)觸發(fā)，后面不需要繼續(xù)請(qǐng)求數(shù)據(jù)。
• suspend：已經(jīng)緩沖了足夠的數(shù)據(jù)，暫時(shí)停止下載時(shí)觸發(fā)。
• stalled：嘗試加載數(shù)據(jù)，但是沒有數(shù)據(jù)返回時(shí)觸發(fā)。
• play：調(diào)用play()方法時(shí)或自動(dòng)播放啟動(dòng)時(shí)觸發(fā)。如果已經(jīng)加載了足夠的數(shù)據(jù)，這個(gè)事件后面會(huì)緊跟playing事件，否則會(huì)觸發(fā)waiting事件。
• waiting：由于沒有足夠的緩存數(shù)據(jù)，無法播放或播放停止時(shí)觸發(fā)。一旦緩沖數(shù)據(jù)足夠開始播放，后面就會(huì)緊跟playing事件。
• playing：媒體開始播放時(shí)觸發(fā)。
• timeupdate：currentTime屬性變化時(shí)觸發(fā)，每秒可能觸發(fā)4到60次。
• pause：調(diào)用pause()方法、播放暫停時(shí)觸發(fā)。
• seeking：腳本或者用戶要求播放某個(gè)沒有緩沖的位置，播放停止開始加載數(shù)據(jù)時(shí)觸發(fā)。此時(shí)，seeking屬性返回true。
• seeked：seeking屬性變回false時(shí)觸發(fā)。
• ended：媒體文件播放完畢時(shí)觸發(fā)。
• durationchange：duration屬性變化時(shí)觸發(fā)。
• volumechange：音量變化時(shí)觸發(fā)。
• ratechange：播放速度或默認(rèn)的播放速度變化時(shí)觸發(fā)。
• abort：停止加載媒體文件時(shí)觸發(fā)，通常是用戶主動(dòng)要求停止下載。
• error：網(wǎng)絡(luò)或其他原因?qū)е旅襟w文件無法加載時(shí)觸發(fā)。
• emptied：由于error或abort事件導(dǎo)致networkState屬性變成無法獲取數(shù)據(jù)時(shí)觸發(fā)。