前端培訓-中級階段（17）- 多媒體API（2019-09-19期）

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提升技術水平，打牢基礎知識的中心思想，我們開課啦（每週四）。

媒體包括文字、圖片（<img>）、聲音（<audio>） 、視頻（<video>）等。web 可以現實的功能越來越多，表現形式也越來越豐富。

介紹內容

1. <img> 圖片標籤
2. <audio> 音頻標籤
   <audio> 元素用於在 Web 上下文中播放音頻。可以用於複雜媒體的隱性目標，或是用戶控制播放音頻的控制器。
   可以從 JavaScript HTMLAudioElement 對象中訪問。
3. <video> 視頻標籤
   <video> 元素用於在 Web 上下文中播放視頻。可以簡單地用於呈現視頻，可以是流式視頻的目標。也可以用於連接媒體API 和其他HTML、DOM API，比如 <canvas> （用於抓取當前幀，調整編輯)
   可以通過 JavaScript HTMLVideoElement 對象訪問。

4. <track> 字幕標籤。兼容性感人，我就不多說了。效果地址

   <track> 元素可以被放置在 <audio> 或者 <video> 元素內部，當在媒體播放時，以提供 WebVTT 格式化字幕或標題軌道的參考。可以通過 JavaScript HTMLTrackElement 對象訪問。

圖片

常用圖片類型比對

後綴	支持透明	矢量圖	支持壓縮	支持動畫	支持連續	支持交錯
jpg	×	×	√	×
png	√	×	√	×
gif	×	×	√	√
bmp	×	×	×	×
webp	×	×	√	×

圖片所有類型

1. jpg 聯合照片專家組（外語簡稱JPEG 外語全稱：Joint Photographic Expert Group）
   是一種有損壓縮格式，能夠將圖像壓縮在很小的儲存空間，圖像中重複或不重要的資料會被丟失，因此容易造成圖像數據的損傷。
2. png 便攜式網絡圖形（外語簡稱PNG、外語全稱：Portable Network Graphics）
   PNG 支持高級別無損耗壓縮。PNG 支持 alpha 通道透明度。PNG 支持交錯。
3. bmp 位圖，windows系統帶的畫圖工具保存的就是 bmp 格式。是一種與硬件設備無關的圖像文件格式，使用非常廣。它採用位映射存儲格式，除了圖像深度可選以外，不支持其他任何壓縮，因此，BMP文件所佔用的空間很大。BMP文件的圖像深度可選lbit、4bit、8bit及24bit。BMP文件存儲數據時，圖像的掃描方式是按從左到右、從下到上的順序。
4. gif 圖形交換格式（外語簡稱：GIF、外語全稱：Graphics Interchange Format）
   GIF文件的數據，是一種基於LZW算法的連續色調的無損壓縮格式。所以GIF的圖像深度從lbit到8bit，最多支持256種色彩的圖像。GIF格式的另一個特點是其在一個GIF文件中可以存多幅彩色圖像，如果把存於一個文件中的多幅圖像數據逐幅讀出並顯示到屏幕上，就可構成一種最簡單的動畫。另外，GIF不支持 Alpha透明通道。
5. webp (發音weppy)
   谷歌開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，節省大量的服務器寬帶資源和數據空間。同時提供了有損壓縮與無損壓縮，派生自圖像編碼格式VP8 。
6. ico 它是Windows的圖標文件格式的一種，可以存儲單個圖案、多尺寸、多色板的圖標文件。
7. svg 目前首選的網頁矢量圖格式。圖像容量小、圖像放大不失真、支持透明背景和半透明色彩、圖像邊緣光滑。
8. TPG 由騰訊音視頻實驗室基於 AVS2 內核自主研發而成。其它常用圖片格式相比，同等影像質量下，TPG 圖片的體積比 PNG 小 50%以上，比 GIF 小 90%以上，比 JPG/JPEG 小 40%以上。相對 Google 近來推出的 WebP 格式，TPG 文件大小可以減少近 30%。
9. PCX PCX 在許多基於 Windows 的程序和基於 MS-DOS 的程序間是標準格式。PCX 支持內部壓縮。PCX 不支持 Web 瀏覽器
10. TIF 標籤圖像文件格式（中文簡稱TIF、外語簡稱TIFF、外語全稱：TagImage FileFormat）
11. TGA 已標記的圖形（外語全稱：Tagged Graphics）TGA的結構比較簡單，屬於一種圖形、圖像數據的通用格式，在多媒體領域有很大影響，是計算機生成圖像向電視轉換的一種首選格式。
12. EXIF 可交換的圖像文件格式（外語簡稱EXIF、外語全稱：EXchangeable Image file Format）。除保存圖像數據外，還能夠存儲攝影日期、使用光圈、快門、閃光燈數據等曝光資料和附帶信息以及小尺寸圖像。
13. fpx 閃光照片（外語簡稱FPX、外語全稱：kodak Flash PiX）
14. psd （Photoshop圖像處理軟件的專用文件格式）
    可以支持圖層、通道、蒙板和不同色彩模式的各種圖像特徵，是一種非壓縮的原始文件保存格式。掃描儀不能直接生成該種格式的文件。PSD文件有時容量會很大，但由於可以保留所有原始信息，在圖像處理中對於尚未製作完成的圖像，選用 PSD格式保存是最佳的選擇。
15. CDR CorelDRAW的專用圖形文件格式
16. PCD 照片激光唱片 （外語簡稱：PCD、外語全稱：kodak PhotoCD）
17. DXF 圖紙交換格式（外語簡稱：DXF、外語全稱：Drawing eXchange Format） AutoCAD中的圖形文件格式
18. UFO Ulead Photolmapct的專用圖像格式
19. EPS 封裝式頁描述語言（外語簡稱：EPS、外語全稱：Encapsulated PostScript）
20. AI Adobe公司的ILLUSTRATOR輸出格式
21. HDRI 高動態範圍成像（外語簡稱：HDRI、外語全稱：High Dynamic Range Imaging）
22. RAW RAW文件包含了原圖片文件在傳感器產生後，進入照相機圖像處理器之前的一切照片信息
23. WMF （Windows Metafile Format）是Windows中常見的一種圖元文件格式，屬於矢量文件格式。它具有文件短小、圖案造型化的特點，整個圖形常由各個獨立的組成部分拼接而成，其圖形往往較粗糙。
24. Flic FLIC是FLC和FLI的統稱：FLI是最初的基於320×200分辨率的動畫文件格式，而FLC則採用了更高效的數據壓縮技術，所以具有比FLI更高的壓縮比，其分辨率也有了不少提高。
25. EMF（Enhanced Metafile）是微軟公司爲了彌補使用WMF的不足而開發的一種Windows 32位擴展圖元文件格式，也屬於矢量文件格式。

音頻

HTMLAudioElement 接口提供訪問 <audio> 元素的接口。 繼承了 HTMLMediaElement 接口。

標籤屬性

標籤屬性 -測試地址

1. autoplay 默認值爲false。如果爲true會自動播放。移動環境中自動播放會失效。
2. controls 默認值爲false。如果爲true會顯示一個控制面板（播放、暫停、進度、聲音）。
3. loop 默認值爲false。如果爲true會循環播放。
4. muted 默認值爲false。如果爲muted會靜音播放。

5. preload 默認值就是瀏覽器定義的了（不同瀏覽器會選擇自己的默認值）， 即使規範建議設置爲 metadata。

   1. none: 示意用戶可能不會播放該音頻，或者服務器希望節省帶寬；換句話說，該音頻不會被緩存；
   2. metadata: 示意即使用戶可能不會播放該音頻，但獲取元數據 (例如音頻長度) 還是有必要的。
   3. auto: 示意用戶可能會播放音頻；換句話說，如果有必要，整個音頻都將被加載，即使用戶不期望使用。

對象屬性

1. currentTime 當前播放時間，單位爲秒。賦值會使媒體跳到一個新的時間。
2. duration 媒體以秒爲單位的總長度時間，如果媒體不可用，則爲0. 如果媒體可用，但時間長度未知, 值爲NAN. 如果媒體是以stream形式傳輸並且沒有預定長度，則值爲Inf。
3. volume 音量
4. playbackRate 用來設置或獲取當前媒體文件的播放速率

對象方法

1. pause() 暫停
2. play() 播放

事件

1. loadstart 加載過程已經開始，瀏覽器正在連接到媒體。
2. durationchange 當準確時長返回時候，會觸發durationchange，此時我們就可以快速顯示音頻播放時間了。
3. loadedmetadata 當第一個音頻文件字節數據到達時，會觸發loadeddata事件。雖然播放頭已經就位，但還沒有準備好播放。
4. canplay 當媒體文件可以播放的時候會觸發canplay事件。
5. canplaythrough 在音頻文件可以從頭播放到尾時候觸發。這種情況包括音頻文件已經從頭到尾加載完畢了，或者瀏覽器認爲一定可以按時下載，不會發生緩衝停止。
6. timeupdate 每次currentTime屬性值發生變化的時候會觸發timeupdate事件。
7. volumechange 音量發生變化的時候會觸發。包括靜音行爲。
8. ratechange 播放速率發生變化的時候會觸發
9. play 事件觸發的播放狀態一定是一個從暫停到播放。
10. pause 此事件觸發需要一個從播放到暫停的狀態變化。
11. ended 當整個音頻文件播放完畢的時觸發

媒體事件加載順序如下：
loadstart → durationchange → loadedmetadata → loadeddata → progress → canplay → canplaythrough

視頻

HTMLVideoElement 接口提供了用於操作視頻對象的特殊屬性和方法。繼承了 HTMLMediaElement 接口。

標籤屬性

同音頻標籤屬性，但會有一些特殊的。

1. poster （video標籤）封面圖的url。默認爲第一幀
2. width、height

WebRTC API

WebRTC (Web Real-Time Communications) 是一項實時通訊技術，它允許網絡應用或者站點，在不借助中間媒介的情況下，建立瀏覽器之間點對點（Peer-to-Peer）的連接，實現視頻流和（或）音頻流或者其他任意數據的傳輸。WebRTC包含的這些標準使用戶在無需安裝任何插件或者第三方的軟件的情況下，創建點對點（Peer-to-Peer）的數據分享和電話會議成爲可能。

web Audio

一個簡單而典型的web audio流程如下：

1. 創建音頻上下文
2. 在音頻上下文裏創建源 — 例如 <audio>, 振盪器, 流
3. 創建效果節點，例如混響、雙二階濾波器、平移、壓縮
4. 爲音頻選擇一個目的地，例如你的系統揚聲器
5. 連接源到效果器，對目的地進行效果輸出

媒體流處理API

媒體流處理API（通常被稱爲媒體流API或流API）是描述音頻或視頻數據流的 WebRTC 的一部分。
這個API是基於操縱一個 MediaStream 對象代表音頻或視頻相關數據的流量。 通常一個 MediaStrea 是作爲一個簡單的 URL string 它可以用來引用存儲在DOM中的數據 File, 或者一個 Blob 對象建立 window.URL.createObjectURL()。

一個 MediaStream 包含零個或更多的 MediaStreamTrack 對象，代表着各種的聲軌和視頻軌。
一個 MediaStreamTrack 可能有一個或更多的通道。
通道代表着媒體流的最小單元，比如一個音頻信號對應着一個對應的揚聲器，像是在立體聲音軌中的左通道或右通道。

MediaStream 對象有着單一的輸入和輸出。
由 getUserMedia() 創建的 MediaStream 對象是在本地藉助用戶相機和麥克風的源輸入。
非本地的 MediaStream 代表了一個媒體元素, 像是 <video> 元素或是 <audio> 元素， 一般是源自網絡的流，並通過 WebRTC PeerConnection API 或使用 Web Audio API 獲得MediaStreamAudioSourceNode 元素。
MediaStream 對象的輸出能鏈接到一個用戶。 它可以是一個媒體元素, 像是 <audio> 或者 <video>、 WebRTC PeerConnection API 或是 Web Audio API MediaStreamAudioDestinationNode。

微信公衆號：前端linong

參考文獻

1. Web 媒體技術 -MDN
2. Web_Audio_API
3. 媒體流處理API
4. WebRTC API
5. HTML audio基礎API完全使用指南