## 第二節：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()`方法的一個例子。 ~~~ var myVideo = document.getElementById('myVideoElement'); myVideo .play() .then(() => { console.log('playing'); }) .catch((error) => { console.log(error); }); ~~~