# <video>，<audio> ## 概述 `<video>`元素用來加載視頻，是`HTMLVideoElement`對象的實例。`<audio>`元素用來加載音頻，是`HTMLAudioElement`對象的實例。而`HTMLVideoElement`和`HTMLAudioElement`都繼承了`HTMLMediaElement`，所以這兩個 HTML 元素有許多共同的屬性和方法，可以放在一起介紹。 理論上，這兩個 HTML 元素直接用`src`屬性指定媒體文件，就可以使用了。 ```html <audio src="background_music.mp3"/> <video src="news.mov" width=320 height=240/> ``` 注意，`<video>`元素有`width`屬性和`height`屬性，可以指定寬和高。`<audio>`元素沒有這兩個屬性，因為它的播放器外形是瀏覽器給定的，不能指定。 實際上，不同的瀏覽器支持不同的媒體格式，我們不得不用`<source>`元素指定同一個媒體文件的不同格式。 ```html <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`并沒有對應的 HTML 元素，而是作為`<video>`和`<audio>`的基類，定義一些它們共同的屬性和方法。 `HTMLMediaElement`接口有以下屬性。 - HTMLMediaElement.audioTracks：返回一個類似數組的對象，表示媒體文件包含的音軌。 - HTMLMediaElement.autoplay：布爾值，表示媒體文件是否自動播放，對應 HTML 屬性`autoplay`。 - HTMLMediaElement.buffered：返回一個 TimeRanges 對象，表示瀏覽器緩沖的內容。該對象的`length`屬性返回緩存里面有多少段內容，`start(rangeId)`方法返回指定的某段內容（從0開始）開始的時間點，`end()`返回指定的某段內容結束的時間點。該屬性只讀。 - HTMLMediaElement.controls：布爾值，表示是否顯示媒體文件的控制欄，對應 HTML 屬性`controls`。 - HTMLMediaElement.controlsList：返回一個類似數組的對象，表示是否顯示控制欄的某些控件。該對象包含三個可能的值：`nodownload`、`nofullscreen`和`noremoteplayback`。該屬性只讀。 - HTMLMediaElement.crossOrigin：字符串，表示跨域請求時是否附帶用戶信息（比如 Cookie），對應 HTML 屬性`crossorigin`。該屬性只有兩個可能的值：`anonymous`和`use-credentials`。 - HTMLMediaElement.currentSrc：字符串，表示當前正在播放的媒體文件的絕對路徑。該屬性只讀。 - HTMLMediaElement.currentTime：浮點數，表示當前播放的時間點。 - HTMLMediaElement.defaultMuted：布爾值，表示默認是否關閉音量，對應 HTML 屬性`muted`。 - HTMLMediaElement.defaultPlaybackRate：浮點數，表示默認的播放速率，默認是1.0。 - HTMLMediaElement.disableRemotePlayback：布爾值，是否允許遠程回放，即遠程回放的時候是否會有工具欄。 - HTMLMediaElement.duration：浮點數，表示媒體文件的時間長度（單位秒）。如果當前沒有媒體文件，該屬性返回0。該屬性只讀。 - HTMLMediaElement.ended：布爾值，表示當前媒體文件是否已經播放結束。該屬性只讀。 - HTMLMediaElement.error：返回最近一次報錯的錯誤對象，如果沒有報錯，返回`null`。 - HTMLMediaElement.loop：布爾值，表示媒體文件是否會循環播放，對應 HTML 屬性`loop`。 - HTMLMediaElement.muted：布爾值，表示音量是否關閉。 - HTMLMediaElement.networkState：當前網絡狀態，共有四個可能的值。0表示沒有數據；1表示媒體元素處在激活狀態，但是還沒開始下載；2表示下載中；3表示沒有找到媒體文件。 - HTMLMediaElement.paused：布爾值，表示媒體文件是否處在暫停狀態。該屬性只讀。 - HTMLMediaElement.playbackRate：浮點數，表示媒體文件的播放速度，1.0是正常速度。如果是負數，表示向后播放。 - HTMLMediaElement.played：返回一個 TimeRanges 對象，表示播放的媒體內容。該屬性只讀。 - HTMLMediaElement.preload：字符串，表示應該預加載哪些內容，可能的值為`none`、`metadata`和`auto`。 - HTMLMediaElement.readyState：整數，表示媒體文件的準備狀態，可能的值為0（沒有任何數據）、1（已獲取元數據）、2（可播放當前幀，但不足以播放多個幀）、3（可以播放多幀，至少為兩幀）、4（可以流暢播放）。該屬性只讀。 - HTMLMediaElement.seekable：返回一個 TimeRanges 對象，表示一個用戶可以搜索的媒體內容范圍。該屬性只讀。 - HTMLMediaElement.seeking：布爾值，表示媒體文件是否正在尋找新位置。該屬性只讀。 - HTMLMediaElement.src：布爾值，表示媒體文件的 URL，對應 HTML 屬性`src`。 - HTMLMediaElement.srcObject：返回`src`屬性對應的媒體文件資源，可能是`MediaStream`、`MediaSource`、`Blob`或`File`對象。直接指定這個屬性，就可以播放媒體文件。 - HTMLMediaElement.textTracks：返回一個類似數組的對象，包含所有文本軌道。該屬性只讀。 - HTMLMediaElement.videoTracks：返回一個類似數組的對象，包含多有視頻軌道。該屬性只讀。 - HTMLMediaElement.volume：浮點數，表示音量。0.0 表示靜音，1.0 表示最大音量。 `HTMLMediaElement`接口有如下方法。 - HTMLMediaElement.addTextTrack()：添加文本軌道（比如字幕）到媒體文件。 - HTMLMediaElement.captureStream()：返回一個 MediaStream 對象，用來捕獲當前媒體文件的流內容。 - HTMLMediaElement.canPlayType()：該方法接受一個 MIME 字符串作為參數，用來判斷這種類型的媒體文件是否可以播放。該方法返回一個字符串，有三種可能的值，`probably`表示似乎可播放，`maybe`表示無法在不播放的情況下判斷是否可播放，空字符串表示無法播放。 - HTMLMediaElement.fastSeek()：該方法接受一個浮點數作為參數，表示指定的時間（單位秒）。該方法將媒體文件移動到指定時間。 - HTMLMediaElement.load()：重新加載媒體文件。 - HTMLMediaElement.pause()：暫停播放。該方法沒有返回值。 - HTMLMediaElement.play()：開始播放。該方法返回一個 Promise 對象。 下面是`play()`方法的一個例子。 ```javascript var myVideo = document.getElementById('myVideoElement'); myVideo .play() .then(() => { console.log('playing'); }) .catch((error) => { console.log(error); }); ``` ## HTMLVideoElement 接口 `HTMLVideoElement`接口代表了`<video>`元素。這個接口繼承了`HTMLMediaElement`接口，并且有一些自己的屬性和方法。 HTMLVideoElement 接口的屬性。 - HTMLVideoElement.height：字符串，表示視頻播放區域的高度（單位像素），對應 HTML 屬性`height`。 - HTMLVideoElement.width：字符串，表示視頻播放區域的寬度（單位像素），對應 HTML 屬性`width`。 - HTMLVideoElement.videoHeight：該屬性只讀，返回一個整數，表示視頻文件自身的高度（單位像素）。 - HTMLVideoElement.videoWidth：該屬性只讀，返回一個整數，表示視頻文件自身的寬度（單位像素）。 - HTMLVideoElement.poster：字符串，表示一個圖像文件的 URL，用來在無法獲取視頻文件時替代顯示，對應 HTML 屬性`poster`。 HTMLVideoElement 接口的方法。 - HTMLVideoElement.getVideoPlaybackQuality()：返回一個對象，包含了當前視頻回放的一些數據。 ## HTMLAudioElement 接口 `HTMLAudioElement`接口代表了`<audio>`元素。 該接口繼承了`HTMLMediaElement`，但是沒有定義自己的屬性和方法。瀏覽器原生提供一個`Audio()`構造函數，返回的就是`HTMLAudioElement`實例。 ```javascript var song = new Audio([URLString]); ``` `Audio()`構造函數接受一個字符串作為參數，表示媒體文件的 URL。如果省略這個參數，可以稍后通過`src`屬性指定。 生成`HTMLAudioElement`實例以后，不用插入 DOM，可以直接用`play()`方法在背景播放。 ```javascript var a = new Audio(); if (a.canPlayType('audio/wav')) { a.src = 'soundeffect.wav'; a.play(); } ``` ## 事件 `<video>`和`<audio>`元素有以下事件。 - loadstart：開始加載媒體文件時觸發。 - progress：媒體文件加載過程中觸發，大概是每秒觸發2到8次。 - loadedmetadata：媒體文件元數據加載成功時觸發。 - loadeddata：當前播放位置加載成功后觸發。 - canplay：已經加載了足夠的數據，可以開始播放時觸發，后面可能還會請求數據。 - canplaythrough：已經加載了足夠的數據，可以一直播放時觸發，后面不需要繼續請求數據。 - suspend：已經緩沖了足夠的數據，暫時停止下載時觸發。 - stalled：嘗試加載數據，但是沒有數據返回時觸發。 - play：調用`play()`方法時或自動播放啟動時觸發。如果已經加載了足夠的數據，這個事件后面會緊跟`playing`事件，否則會觸發`waiting`事件。 - waiting：由于沒有足夠的緩存數據，無法播放或播放停止時觸發。一旦緩沖數據足夠開始播放，后面就會緊跟`playing`事件。 - playing：媒體開始播放時觸發。 - timeupdate：`currentTime`屬性變化時觸發，每秒可能觸發4到60次。 - pause：調用`pause()`方法、播放暫停時觸發。 - seeking：腳本或者用戶要求播放某個沒有緩沖的位置，播放停止開始加載數據時觸發。此時，`seeking`屬性返回`true`。 - seeked：`seeking`屬性變回`false`時觸發。 - ended：媒體文件播放完畢時觸發。 - durationchange：`duration`屬性變化時觸發。 - volumechange：音量變化時觸發。 - ratechange：播放速度或默認的播放速度變化時觸發。 - abort：停止加載媒體文件時觸發，通常是用戶主動要求停止下載。 - error：網絡或其他原因導致媒體文件無法加載時觸發。 - emptied：由于`error`或`abort`事件導致`networkState`屬性變成無法獲取數據時觸發。