Web 音視頻的發展史
刀耕火種的年代——早期 HTML
在早期的 HTML，由于帶寬、技術等各種因素限制，網頁主要以簡單的靜態內容為主，只支持一些文字圖片內容和簡單的排版，不支持在線觀看音視頻。
（圖為 1994 年的 Yahoo!）
迭起興衰——Flash 的興起與淘汰
20 世紀初，隨著互聯網的發展，各種 Web 應用和門戶網站不斷出現，人們渴望在網頁上看到更加豐富多彩的內容，比如視頻、動畫等等，于是 Flash 進入了人們的視野。
彼時的 Flash 沒有像現在大家印象中的那么臃腫，剛誕生的 Flash 小巧、高效、跨平臺，同時憑借幾十 K 的體積做出放大也不會失真的各種矢量彩色動畫，在還是撥號上網，帶寬條件受限，加載一個在線視頻需要好幾分鐘的年代脫穎而出，甚至可以做出各種令人沉迷的 Flash 小游戲。
（Flash 塑造了很多經典的小游戲角色，火柴人就是其中之一）
Flash 的興起，得益于當時 HTML 對于媒體文件支持的匱乏。Flash 以插件的形式，干著平臺才需要負擔的繁重工作，并得益于 Adobe 的大力推廣，Flash 先后增加了對 、HTML、XML 的支持，并增強了影音方面的功能。同時由于 Flash 跨平臺的特性，非常容易被移植，市面上稍微高端點的設備，也得乖乖地給 Adobe 交授權費。
然而 2007 年推出的 并不買賬，他們以增加續航、安全為由拋棄了 Flash，很多人一開始對此嗤之以鼻，但事實證明蘋果對此確實有遠見，大量低質量的 Flash 使當時續航本就有限的移動設備更加不堪重負。2012 年， 也宣布不再支持 Flash，Flash 在移動市場不再有立足之地。
在桌面市場上，Flash 的日子也并不好過。 從的 42 開始，就已經強制把 Flash 裝入沙箱，以 PPAPI 的形式運行；而從 版本號 88 開始，已經徹底不再支持 Flash 技術了。微軟的 Edge 瀏覽器也同步不支持 Flash。 的前輩 更加激進，從 2016 年就已經默認禁止 Flash 運行了。
至于 Flash 為什么走向了淘汰，除了它的效率變低藍光原盤電影轉換格式，不安全因素過多，穩定性不足外，還有一個重要原因：Web 音視頻解決方案有了更好的替代品—— HTML5。
新時代的潮流——HTML5 的到來
其實，對于 HTML5 是否可以真正替代 Flash，尤大在 2011 年已經給出了預言：
事實正如預言所預料，HTML5 在 2008 年發布后，經過不斷改進完善，基本上能包辦 Flash 所有能干的事情了。HTML5 引入了許多新特性和新功能，其中就包含了 video 和 audio 標簽，也就是對音視頻的支持。使用了支持 HTML5 標準的網絡瀏覽器訪問 HTML5 站點，用戶無需在電腦上安裝 Flash 插件就可以在線觀看視頻，擺脫了對 Flash 的依賴。
<video?src="movie.mp4"?poster="movie.jpg"?controls>video>
同時，各大視頻門戶網站也加入了對 HTML5 的支持，并默認推薦以 HTML5 的方式來播放視頻。
2021 年 1 月 20 日， 88 正式發布，徹底的禁止使用 Flash。自此，Flash 算是徹底退出了歷史舞臺。
到底什么是視頻
視頻，其實就是一系列連續播放的圖片，如果一秒鐘播放 24 張圖片，那么人眼看到的就不再是一張張獨立的圖片，而是動起來的畫面。其中一張圖片稱為一幀，1s 播放的圖片數稱為幀率。由于人類眼睛的特殊生理結構，如果所看畫面之幀率高于每秒約 10-12 幀的時候，就會認為是連貫的；當看到幀率為 24 fps 以上時，大腦會認為這是流暢播放的視頻。所以一般有聲電影的拍攝及播放幀率大約為每秒 24 幀，歐美、日本那邊由于電視制式不同，大約為 30 幀。
電影的幀率與游戲的幀率
為什么 24 幀的電影比 30 幀的游戲要流暢許多？
這其中的原因就在于，電影和游戲的圖像生成原理不同。
電影的 24 fps，是每 1/24 秒拍攝一副畫面，如果你玩過相機的手動設置，你應該知道如果以 1/24 秒的快門速度拍攝一個運動的物體會“糊”掉，而正是這樣“糊”掉的畫面連起來才讓我們的眼睛看上去很“流暢”。
而游戲畫面不是按 1/24 秒快門拍出來的，而是每一幅畫面都是獨立渲染出來的，之所以跑成 24fps 是因為顯卡處理能力不夠而“丟棄”了其中的一些畫面，這樣一來每兩幅畫面之間就不連續了，自然看上去會“卡”。
舉個例子，一個圓從左上角移動到右下角，如果是電影，第一幀與第二幀可能是類似下圖這樣的：
如果是游戲畫面，第一幀與第二幀會類似下面這兩張圖：
此外，幀與幀之間間隔恒定：人眼對于動態視頻的捕捉是非常敏感的，電影幀率是固定不變，肉眼很難察覺出異常。
而游戲的幀率卻是很容易變化的——如果手動鎖定幀數，顯卡會默認渲染最高幀率。
玩家觸發的很多劇情往往伴隨劇烈的畫面變動，這時顯卡的幀率就會出現下降，前后不一致的幀率很容易被肉眼捕捉，這時我們就會覺得，游戲變“卡”了。
視頻的編碼
視頻是由圖片構成的，圖片是由像素構成的，假設尺寸為 1980*1080。每個像素由 RGB 構成，每個 8 位，共 24 位。
假設幀率是 24，那么每秒鐘的視頻的尺寸如下：
一分鐘視頻的尺寸就是 Bytes 已經是 8.8 個 G 了。
可以看到，如果是不對視頻做任何處理，是非常不方便對于視頻做傳輸與存儲的，所以需要對視頻進行壓縮，也就是編碼。
視頻編碼
視頻圖像數據有很強的相關性，也就是說有大量的冗余信息。其中冗余信息可分為空域冗余信息和時域冗余信息。壓縮技術就是將數據中的冗余信息去掉（去除數據之間的相關性），壓縮技術包含幀內圖像數據壓縮技術、幀間圖像數據壓縮技術和熵編碼壓縮技術。
經過編碼之后，視頻由一幀幀的圖片，變成了一串串讓人看不懂的二進制代碼，因為編碼的方式(算法)的不同，所以就有了編碼格式的區分。常見的編碼格式有 H.264，MPEG-4，VP8 等。
我們前端開發只需要記住一點，主流瀏覽器支持的視頻編碼格式是 H.264。
CD 音質的音頻，存放一分鐘數據需要的大小為 10M，太大了，也需要壓縮（編碼）。
常見的編碼方式有：WAV、MP3 和 AAC 格式。
音頻的編碼方式不像視頻那樣那么多，而且音頻在各個瀏覽器基本上都可以播放。
具體的每種編碼格式包含的音頻是怎么構成的，這里就不講了。
封裝格式
我們把視頻數據、音頻數據打包到一起，然后再添加一些基本信息，例如分辨率、時長、標題等，構成一個文件，這個文件稱為封裝格式。常見的封裝格式有 MP4, AVI, RMVB 等。
可以看出，視頻的封裝格式和視頻的編碼格式往往是無關的，一個 mp4 文件，里面的視頻流編碼可以是 h264，也可以是 mpeg-4，所以就會出現，同樣都是 mp4 文件，有的瀏覽器可以放，有的瀏覽器就放不了的問題，因為能不能放是由視頻碼流的編碼格式決定的。
碼率
碼率，也叫比特率，幀率是 1s 播放多少幀，類比一下，比特率就是 1s 的視頻有多少 bit。
這個參數直接決定了視頻的大小與清晰程度。
一般網上流傳的電影 MKV（BDrip-1080P）的碼率是 10Mb/s 左右，藍光原盤是 20Mb/s 左右，這兩者都是 H.264 編碼的。另外一些 MV、PV、演示片什么的除了 H.264 編碼，可能還有 MPEG-2 編碼，碼率大小不等，像 那些在線的 1080P 的視頻，碼率可能只有 5Mb/s，而一些 MV 的碼率可以高到離譜，可以達到 110Mb/s 的，3 分多鐘的 MV 差不多有 3GB 大小。
而一般的視頻剪輯、后期軟件，在輸出序列的時候，都會有碼率這個選項。
視頻播放器的原理
播放視頻的基本流程是：解協議 → 解封裝 → 解碼 → 視音頻同步。如果播放本地文件則不需要解協議。
解協議的作用，就是將流媒體協議的數據，解析為標準的相應的封裝格式數據。視音頻在網絡上傳播的時候，常常采用各種流媒體協議，例如 HTTP，RTMP，或是 MMS 等等。這些協議在傳輸視音頻數據的同時，也會傳輸一些信令數據。這些信令數據包括對播放的控制（播放，暫停，停止），或者對網絡狀態的描述等。解協議的過程中會去除掉信令數據而只保留視音頻數據。
解封裝的作用，就是將輸入的封裝格式的數據，分離成為音頻流壓縮編碼數據和視頻流壓縮編碼數據。封裝格式種類很多，例如 MP4，MKV，RMVB，TS，FLV，AVI 等等，它的作用就是將已經壓縮編碼的視頻數據和音頻數據按照一定的格式放到一起。例如，FLV 格式的數據，經過解封裝操作后，輸出 H.264 編碼的視頻碼流和 AAC 編碼的音頻碼流。
解碼的作用，就是將視頻/音頻壓縮編碼數據，解碼成為非壓縮的視頻/音頻原始數據。音頻的壓縮編碼標準包含 AAC，MP3，AC-3 等等，視頻的壓縮編碼標準則包含 H.264，MPEG2，VC-1 等等。解碼是整個系統中最重要也是最復雜的一個環節。通過解碼，壓縮編碼的視頻數據輸出成為非壓縮的顏色數據，例如 ，RGB 等等；壓縮編碼的音頻數據輸出成為非壓縮的音頻抽樣數據，例如 PCM 數據。
視音頻同步的作用，就是根據解封裝模塊處理過程中獲取到的參數信息，同步解碼出來的視頻和音頻數據，并將視頻音頻數據送至系統的顯卡和聲卡播放出來。
播放視頻
如果我們碰到一些特殊機型或者特殊情況 HTML5 的 video 解決方案不是很好處理，也可以采用 去播放這個視頻。
使用 播放視頻主要是利用 ctx.(video, x, y, width, ) 來對視頻當前幀的圖像進行繪制，其中 video 參數就是頁面中的 video 對象。所以如果我們按照特定的頻率不斷獲取 video 當前畫面，并渲染到 畫布上，就可以實現使用 播放視頻的功能。
"video"?controls="controls"?style="display:?none;">
????<source?src="https://xxx.com/vid_159411468092581"?/>
</video>
canvas>
<div>
????<button?id="playBtn">播放button>
????<button?id="pauseBtn">暫停button>
div>
const?video?=?document.querySelector("#video");
const?canvas?=?document.querySelector("#myCanvas");
const?playBtn?=?document.querySelector("#playBtn");
const?pauseBtn?=?document.querySelector("#pauseBtn");
const?context?=?canvas.getContext("2d");
let?timerId?=?null;
function?draw()?{
????if?(video.paused?||?video.ended)?return;
????context.clearRect(0,?0,?canvas.width,?canvas.height);
????context.drawImage(video,?0,?0,?canvas.width,?canvas.height);
????timerId?=?setTimeout(draw,?0);
}
playBtn.addEventListener("click",?()?=>?{
????if?(!video.paused)?return;
????video.play();
????draw();
});
pauseBtn.addEventListener("click",?()?=>?{
????if?(video.paused)?return;
????video.pause();
????clearTimeout(timerId);
});
事實上，市面上已經有不少 播放視頻的解決方案，比較出名的是這個 [1]。它和 PIXI 一樣，可以選擇 WebGL 渲染視頻也可以直接用 渲染視頻。
是沒有 npm 包的，但是社區上有開發者基于 封裝了一個 npm 包：
在官網上是這么介紹的：
is a Video in . It of an MPEG-TS , MPEG1 Video & MP2 Audio , WebGL & and Sound . can load files via Ajax and low (~50ms) via .
由于它所支持的編碼格式不是常規的 H.264，而是比較老的 MPEG1，并且解封裝器為 MPEG-TS。所以一般我們使用它去渲染視頻的格式為 TS。
TS 是日本高清攝像機拍攝下進行的封裝格式，全稱為 MPEG2-TS。它的特點就是要求從視頻流的任一片段開始都是可以獨立解碼的。
TS 文件通常作為多個文件保存在 DVD 上，雖然它可以在高清攝像機、藍光 DVD 中無需借助其他軟件就能直接打開，但是 TS 視頻文件與大多數的媒體播放器、便攜式播放器或視頻編輯工具都不兼容，所以這個時候， 就可以出場了。
視頻操作神器——
[2] 是一個開源的軟件，我們直接用 就可以安裝
brew install ffmpeg
如果我們想轉換為 所需的 ts 格式視頻，可以執行
$ ffmpeg -i input.mp4 -f mpegts \
-codec:v mpeg1video -s 640x360 -b:v 1500k -r 25 -bf 0 \
-codec:a mp2 -ar 44100 -ac 1 -b:a 64k \
output.ts
B 幀法（B frame）是雙向預測的幀間壓縮算法。當把一幀壓縮成 B 幀時，它根據相鄰的前一幀、本幀以及后一幀數據的不同點來壓縮本幀，也即僅記錄本幀與前后幀的差值。
音頻采樣率是指錄音設備在單位時間內對模擬信號采樣的多少，采樣頻率越高，機械波的波形就越真實越自然。
音頻碼率，指一個音頻流中每秒鐘能通過的數據量，碼率越大的話，音質越好
是一個非常強大的音視頻轉換工具，不僅可以視頻轉換，還可以視頻尺寸裁剪、視頻時長裁剪、視頻拼接等等功能，目前很多在線視頻剪輯工具基本是基于 開發的。
音視頻的一些資源推薦
國內學習音視頻相關的開發，繞不過的一個大神是 雷霄驊[3]，大佬已經去世了，但是留下的文章永垂不朽。
本文也是參考了 雷霄驊[3]的部分博客，如果感興趣，可以從這篇文章看起：\[總結\]視音頻編解碼技術零基礎學習方法\_雷霄驊\(\)的專欄-CSDN 博客\_雷霄驊[4]。
對于直播 感興趣的藍光原盤電影轉換格式，也可以看一下 Real time with [5]，國內慕課網上李超老師也有不錯的教程：李超\_慕課網精英講師[6]
對 感興趣的，可以看一下這里：
參考資料[1]
:
[2]
:
[3]
雷霄驊: :///
[4]
[總結]視音頻編解碼技術零基礎學習方法_雷霄驊()的專欄-CSDN 博客_雷霄驊:
[5]
Real time with :
[6]
李超_慕課網精英講師:
4.5.||6.||7. 120
回復“加群”與大佬們一起交流學習~