JavaScript <video>，<audio>

概述 

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

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

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

注意，<video>元素有width屬性和height屬性，可以指定寬和高。<audio>元素沒有這兩個屬性，因為它的播放器外形是瀏覽器給定的，不能指定。

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

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

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

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

HTMLMediaElement 接口 

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

HTMLMediaElement接口有以下屬性。

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

HTMLMediaElement接口有如下方法。

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

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

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

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

HTMLVideoElement 接口 

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

HTMLVideoElement 接口的屬性。

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

HTMLVideoElement 接口的方法。

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

HTMLAudioElement 接口 

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

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

var song = new Audio([URLString]);

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

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

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

事件 

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

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