# 多媒體（video和audio） ## 概述 在HTML5中引入了`<audio>`和`<video>`元素，用來在HTML文檔中嵌入音頻和視頻： ~~~ <audio src="m.mp3"/> <video src="m.mp4" width=320 height=400 /> ~~~ 由于不同的瀏覽器對標準音頻和視頻的編解碼支持上并不一致，所以通常需要使用<source>元素來為指定不同格式的媒體源： ~~~ <audio id="music"> <source src="m.mp3" type="audio/mpeg"> <source src="m.ogg" type="audio/ogg;codec='vorbis'"> </audio> ~~~ `<source>`元素沒有任何內容：沒有閉合的`</source>`標簽，也需要使用“/>”來結束它們。 我們可以在`<audio>`和`</audio>`（或`<video>`和`</video>`）標簽之間插入文本內容，如果瀏覽器支持`<audio>`和`<video>`元素，將不會渲染文本內容；而如果瀏覽器不支持時，則會將它們渲染出來。 ~~~ <audio id="music"> <source src="m.mp3" type="audio/mpeg"> <source src="m.ogg" type="audio/ogg;codec='vorbis'"> 您的瀏覽器不支持audio標簽。 </audio> ~~~ ## HTML中媒體的屬性 （1）視頻（`<video>`） ~~~ autoplay autoplay 如果出現該屬性，則視頻在就緒后馬上播放。 controls controls 如果出現該屬性，則向用戶顯示控件，比如播放按鈕。 height pixels 設置視頻播放器的高度。 width pixels 設置視頻播放器的寬度。 loop loop 如果出現該屬性，則循環播放。 muted muted 如果出現該屬性，視頻的音頻輸出為靜音。 poster URL 規定視頻正在下載時顯示的圖像，直到用戶點擊播放按鈕。 preload auto/metadata/none 如果出現該屬性，則視頻在頁面加載時進行加載，并預備播放。如果使用 "autoplay"，則忽略該屬性。 src URL 要播放的視頻的 URL。 ~~~ （2）音頻（`<audio>`） ~~~ autoplay autoplay 如果出現該屬性，則視頻在就緒后馬上播放。 controls controls 如果出現該屬性，則向用戶顯示控件，比如播放按鈕。 loop loop 如果出現該屬性，則當媒介文件完成播放后再次開始播放。 muted muted 如果出現該屬性，視頻的音頻輸出為靜音。 preload auto/metadata/none 如果出現該屬性，則視頻在頁面加載時進行加載，并預備播放。如果使用 "autoplay"，則忽略該屬性。 src URL 要播放的視頻的 URL。 ~~~ ## 用JavaScript操作音頻和視頻 - audio可以通過new創建Audio對象 `var music = new Audio('m.mp3');` - 還可以通過標簽獲取`<audio>`或`<video>`元素，即獲得HTMLVideoElement和HTMLAudioElement對象： `var music = document.getElementById('music');` - 檢測瀏覽器是否支持 `var hasAudio = !!(music.canPlayType); //通過!!運算符將結果轉換成布爾值` ## 屬性 - 只讀屬性： ~~~ duration 整個媒體文件的播放時長，以秒為單位。如果無法獲取時長，則返回NaN paused 如果媒體文件當前被暫停，則返回true。如果還未開始播放，默認返回true ended 如果媒體文件已經播放完畢，則返回true startTime 返回最早的播放起始時間，一般是0.0，除非是緩沖過的媒體文件，并且一部分內容已經不在緩沖區 error 在發生了錯誤的情況下返回的錯誤代碼 currentSrc 以字符串形式返回當前正在播放或已加載的文件。對應于瀏覽器在source元素中選擇的文件 seeking 如果播放器正在跳到一個新的播放點，那seeking的值為true。 initialTime 指定了媒體的開始時間，單位為秒 ~~~ - 可讀寫屬性： ~~~ autoplay 將媒體文件設置為創建后自動播放，或者查詢是否已設置為autoplay loop 返回是否循環播放，或設置循環播放（或者不循環播放） currentTime 指定了播放器應該跳過播放的時間（單位為秒）。在播放過程中，可設置currentTime屬性來進行定點播放。 controls 顯示或隱藏用戶控制界面，或者查詢用戶控制界面當前是否可見 volume 在0.0到1.0之間設置音頻音量的相對值，或者查詢當前音量相對值 muted 布爾值，設置靜音或者消除靜音，或者檢測當前是否為靜音 autobuffer 通知播放器在媒體文件開始播放前，是否驚醒緩沖加載。如果已設置為autoplay，則忽略此特性 playbackRate 用于指定媒體播放的速度。1.0表示正常速度，大于1則表示“快進”，0~1之間表示“慢放”，負值表示回放。 ~~~ - 三個特殊屬性： ~~~ played 返回已經播放的時間段 buffered 返回當前已經緩沖的時間段 seekable 返回當前播放器需要跳到的時間段 played、buffered和seekable都是TimeRanges對象，每個對象都有一個length屬性以及start(index)和end(index)方法，前者表示當前一個時間段，后者分別返回當前時間段的起始時間點和結束時間點（單位為秒）。 ~~~ 還有另外三個屬性： `readyState`、`networkState`和`error`，它們包含audio和video元素的一些狀態細節。每個屬性都是數字類型的，而且為每個有效值都定義了對應的常量。 ### readyStete屬性 readyState屬性指定當前已經加載了多少媒體內容，只讀屬性 ~~~ HAVE_NOTHING（數字值為0）：沒有獲取到媒體的任何信息，當前播放位置沒有可播放數據。 HAVE_METADATA（數字值為1）：已經獲取到足夠的媒體數據，但是當前播放位置沒有有效的媒體數據（也就是說，獲取到的媒體數據無效，不能播放）。 HAVE_CURRENT_DATA（數字值為2）：當前播放位置已經有數據可以播放，但沒有獲致到可以讓播放器前進的數據。當媒體為視頻時，意思是當前帖的數據已獲取，但沒有獲取到下一幀的數據，或者當前幀已經是播放的最重一幀。 HAVE_FUTURE_DATA（數字值為3）：當前播放位置已經有數據可以播放，而且也獲取到了可以讓播放器前進的數據。當媒體為視頻時，意思是當前幀的數據已獲取，而且也獲取到了下刺目販數據，當前幀是播放的最后一幀時，readyState屬性不可能為HAVE_FUTURE_DTAT。 HAVE_ENOUGH)DATA（數字值為4）：當前播放位置已經有數據可以播放，同時也獲取到了可以讓播放器前進的數據，而且瀏覽器確認媒體以某一種速度進行加載，可以保證有足夠的后續數據進行播放。 ~~~ ### networkState屬性 networkState屬性讀取當前的網絡狀態，共有如下所示的4個可能值： - NETWORK_EMPTY（數字值為0）：元素牌初始狀態。 - NETWORK_IDLE（數字值為1）：瀏覽器已選擇好用什么編碼格式來播放媒體，但尚未建立網絡連接。 - NETWORK_LOADING（數字值為2）：媒體數據加載中。 - NETWORK_NO_SOURCE（數字值為3）：沒有支持的編碼格式，不執行加載。 ### error屬性 當在加載媒體或者播放媒體過程中發生錯誤時，瀏覽器就會設置 - MEDIA_ERR_ABORTED(數字值為1）：媒體數據的下載過程由于用戶的操作原因而被中止。 - MEDIA_ERR_NETWORK(數字值為2）：確認媒體資源可用，但是在下載時出現網絡錯誤，媒體數據下載過程被中止。 - MEDIA_ERR_DECODE(數字值為3)：確認媒體資源可能，但是解碼時發生錯誤。 - MEDIA_ERR_SRC_NOT_SUPPORTED（數字值為4）：媒體格式不被支持。 ### video的額外屬性： - poster 在視頻加載完成之前，代表視頻內容的圖片的URL地址。該特性可讀可修改 - width、height 讀取或設置顯示尺寸。如果大小不匹配視頻本身，會導致邊緣出現黑色條狀區域 - videoWidth、videoHeight 返回視頻的固有或自使用寬度和高度。只讀 ## 方法 - canPlayType(type)方法將媒體的MIME類型作為參數，用來測試瀏覽器是否支持指定的媒體類型。如果它不能播放該類型的媒體文件，將返回一個空的字符串；反之，它會返回一個字符串：“maybe”或“probably”。 ~~~ var a = new Audio(); if(a.canPlayType('audio/wav')){ a.src = 'm.wav'; a.play(); } ~~~ - 其他方法： ~~~ play() 控制媒體開始播放 pause() 暫停媒體播放 load() 重新加載src指定的資源 ~~~ ## （3）事件 audio元素和video元素加載音頻和視頻時，以下事件按次序發生。 ~~~ loadstart：開始加載音頻和視頻。 durationchange：音頻和視頻的duration屬性（時長）發生變化時觸發，即已經知道媒體文件的長度。如果沒有指定音頻和視頻文件，duration屬性等于NaN。如果播放流媒體文件，沒有明確的結束時間，duration屬性等于Inf（Infinity）。 loadedmetadata：媒體文件的元數據加載完畢時觸發，元數據包括duration（時長）、dimensions（大小，視頻獨有）和文字軌。 loadeddata：媒體文件的第一幀加載完畢時觸發，此時整個文件還沒有加載完。 progress：瀏覽器正在下載媒體文件，周期性觸發。下載信息保存在元素的buffered屬性中。 canplay：瀏覽器準備好播放，即使只有幾幀，readyState屬性變為CAN_PLAY。 canplaythrough：瀏覽器認為可以不緩沖（buffering）播放時觸發，即當前下載速度保持不低于播放速度，readyState屬性變為CAN_PLAY_THROUGH。 除了上面這些事件，audio元素和video元素還支持以下事件。 abort 播放中斷 emptied 媒體文件加載后又被清空，比如加載后又調用load方法重新加載。 ended 播放結束 error 發生錯誤。該元素的error屬性包含更多信息。 pause 播放暫停 play 暫停后重新開始播放 playing 開始播放，包括第一次播放、暫停后播放、結束后重新播放。 ratechange 播放速率改變 seeked 搜索操作結束 seeking 搜索操作開始 stalled 瀏覽器開始嘗試讀取媒體文件，但是沒有如預期那樣獲取數據 suspend 加載文件停止，有可能是播放結束，也有可能是其他原因的暫停 timeupdate 網頁元素的currentTime屬性改變時觸發。 volumechange 音量改變時觸發（包括靜音）。 waiting 由于另一個操作（比如搜索）還沒有結束，導致當前操作（比如播放）不得不等待。 ~~~ ## 文章推薦 - [pc以及h5全屏播放視頻實踐](https://juejin.im/post/5a72b39ef265da3e2b16bfc0)