青訓營 |「Web多媒體入門」筆記

Web 多媒體歷史#

PC 時代：Flash 等播放插件，富客戶端。
移動互聯網時代：Flash 等逐漸被淘汰，HTML5 出現了，但其支持視頻格式等有限
Media Source Extensions ，支持多種視頻格式等

基礎知識#

編碼格式#

圖像基本概念#

圖像分辨率：用於確定組成一副圖像的像素數據，就是指在水平和垂直方向上圖像所具有的像素個數。
圖像深度：圖像深度是指存儲每個像素所需要的比特數。圖像深度決定了圖像的每個像素可能的顏色數，或可能的灰度級數。
- 例如，彩色圖像每個像素用 R,G,B 三個分量表示，每個分量用 8 位，像素深度為 24 位，可以表示的顏色數目為 2 的 24 次方，即 16777216 個；
- 而一副單色圖像存儲每個像素需要 8bit，則圖像的像素深度為 8 位，最大灰度數目為 2 的 8 次方，即256個。
圖像分辨率與圖像深度共同決定了圖像所佔的大小～

視頻基本概念#

分辨率：每一幀的圖像分辨率
幀率：視頻單位時間內包含的視頻幀的數量
碼率：就是指視頻單位時間內傳輸數據量，一般我們用kbps來表示，即千位每秒。
分辨率、幀率與碼率共同決定視頻的大小

視頻幀的分類#

I 幀、P 幀、B 幀

I 幀（幀內編碼幀）：自帶全部信息的獨立幀，獨立進行解碼，不依賴其他幀

P 幀（前向預測編碼幀）：參考前面的 I 幀或者 P 幀才能進行編碼

B 幀（雙向預測編碼幀）：依賴前面與後面的幀，本幀與前後幀的差別

1 -> 2 -> 3 ->.....

DTS（Decode Time Stamp）解碼時間戳：決定 bit 流什麼時候開始送入解碼器中進行解碼。

PTS（Presentation Time Stamp）顯示時間戳：決定解碼後的視頻幀什麼時候被顯示出來

在沒有 B 幀存在的情況下 DTS 的順序和 PTS 的順序應該是相同的

GOP(group of picture)#

兩個 I 幀之間的間隔，通常在 2~4s

I 幀比較多的話，視頻就會比較大

為什麼要編碼？#

視頻分辨率：1920 × 1080

那麼視頻裡一張圖片大小：1920 × 1080× 24/8 = 6220800Byte (5.2M)

那麼幀率為 30FPS、時長 90 分鐘的這樣一個視頻，占用大小：933G，太大了！

更別說更高的 60FPS 了……

編碼都壓縮掉了些什麼呢？

首先是空間冗餘：

時間冗餘：↓只有球的位置發生了變化，其他的都沒有變化

編碼冗餘：如圖的圖像，可以藍色用 1 白色用 0 來表示（因為只有這兩種顏色，艾特某哈夫曼編碼方式）
視覺冗餘

編碼數據處理流程#

通過預測去除空間和時間冗餘 -> 變換去除空間冗餘

量化去除視覺冗餘：把視覺系統看不太到了的東西去掉
熵編碼 去除編碼冗餘：出現頻率高的，編碼字符所需長度小

封裝格式#

上述視頻編碼存儲的只是單純的視頻信息

封裝格式：存儲音視頻、圖片或者字幕信息的一種容器

多媒體元素和擴展 API#

video & audio#

<video> 標籤用於在 HTML 或者 XHTML 文檔中嵌入媒體播放器，用於支持文檔內的視頻播放。

<!DOCTYPE html>
<html>
<body>
    <video src="./video.mp4" muted autoplay controls width=600 height=300></video>
    <video muted autoplay controls width=600 height=300>
        <source src="./video.mp4"></source>
    </video>
</body>
</html>

<audio> 元素用於在文檔中嵌入音頻內容。

<!DOCTYPE html> 
<html>
<body>
    <audio src="./auido.mp3" muted autoplay controls width=600 he ight=300></audio>
    <audio muted autoplay controls width=600 height=300>
    	<source src=" ./audio.mp3"></source>
    </audio>
</body>
</html>

HTMLMediaElement

方法	描述
play()	開始播放音 / 視頻（異步的）
pause()	暫停當前播放的音 / 視頻
load()	重新加載音 / 視頻元素
canPlayType()	檢測瀏覽器是否能播放指定的音 / 視頻類型
addTextTrack()	向音視頻添加新的文本軌道

屬性	描述
autoplay	設置或返回是否在加載完成後自動播放視頻。
controls	設置或返回音頻 / 視頻是否顯示控件(比如播放 / 暫停等)
currentTime	設置或返回音頻 / 視頻中的當前播放位置(以秒計)
duration	返回當前音頻 / 視頻的長度(以秒計)
src	設置或返回音頻 / 視頻元素的當前來源
volume	設置或返回音頻 / 視頻的音量
buffered	返回表示音頻 / 視頻已緩衝部分的 TimeRanges 對象
playbackRate	設置或返回音頻 / 視頻播放的速度。
error	返回表示音頻 / 視頻錯誤狀態的MediaError 對象
readyState	返回音頻 / 視頻當前的就緒狀態。
...	...

事件	描述
loadedmetadata	當瀏覽器已加載音頻 / 視頻的元數據時觸發
canplay	當瀏覽器可以開始播放音頻 / 視頻時觸發
play	當音頻 / 視頻已開始或不再暫停時觸發
playing	當音頻 / 視頻在因緩衝而暫停或停止後已就緒時觸發
pause	當音頻 / 視頻已暫停時觸發
timeupdate	當目前的播放位置已更改時觸發
seeking	當用戶開始移動 / 跳躍到音頻 / 視頻中的新位置時觸發
seeked	當用戶已移動 / 跳躍到音頻 / 視頻中的新位置時觸發
waiting	當視頻由於需要緩衝下一幀而停止時觸發
ended	當目前的播放列表已結束時觸發
...	...