Video 的格式整理
Feb 26, 2023
封裝格式 ( Container )
儲存影片訊息
影片格式 ( Codec )
H.26x 系列
H.264/MPEG-4 第十部份，或者稱為 AVC ( Advanced Video Coding）
4. H.264
MPEG 系列
1. MPEG-1
2. MPEG-2
等同於 h.262
3. MPEG-4
跟 H.26x 系列的組織合作，誕生了 H.264/AVC
VP 系列
1. VP8 是 Google 買下 On2 Technologiesis 之後開放的免費格式
2. VP6 FLV 在用的
Others
使用 FFMPEG 判斷格式
>> ffmpeg -i {file name} -hide_banner Input #0, mov,mp4,m4a,3gp,3g2,mj2, from '73338079.mp4': Metadata: major_brand : isom minor_version : 1 compatible_brands: isomavc1 creation_time : 2011-11-18 00:00:15 Duration: 00:01:13.56, start: 0.000000, bitrate: 2214 kb/s Stream #0:0(und): Video: h264 (High) (avc1 / 0x31637661), yuv420p, 1280x720 [SAR 1:1 DAR 16:9], 2054 kb/s, 29.97 fps, 29.97 tbr, 30k tbn, 59.94 tbc (default) Metadata: creation_time : 2011-11-18 00:00:15 handler_name : GPAC ISO Video Handler Stream #0:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, stereo, fltp, 157 kb/s (default) Metadata: creation_time : 2011-11-18 00:00:15 handler_name : GPAC ISO Audio Handler
上面的 Stream 的部份，會顯示他的編碼格式
Video 的部份
Video: vp6f, yuv420p, 720x480, 716 kb/s, 29.97 fps, 29.97 tbr, 1k tbn, 1k tbc
這 vp6f 代表示使用 vp6 的 codec 壓縮影片
而 Audio 聲音的部份
Stream #0:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, stereo, fltp, 157 kb/s (default)
則是使用 aac 壓縮
當影片不能播放的時候！
當影片不能播放的時候，需要考量與判斷的部份有幾項
Chromium 有支援的格式
Container 不支援
目前 Chromium 支援的 Container 格式有
支援的 Video 格式有
( Google Chrome only 這是因為 Chrome 自己有付錢給 H.264 )
Flash 支援的 Container 有
Flash 支援的 Video 格式有
FLV 格式的播放方式
HTML5
使用 flv.js 來解開 flv 檔案，之後的內容就跟影片自己的 codec （例如 h.264 等）有關系了
另外一般瀏覽器 不支援 spark codec，所以就算 flv 可以使用 flv.js 解開，但是因為瀏覽器不支援 codec，所以也是無法播放的
Flash Player
使用 Flash Player 來播放，因為 Flash 有內建一些 codec 可以參考 Flash Player 和 AIR 與已編碼之視訊檔案的相容性 來查詢各版本 Flash 支援的 codec。
串流技術 - Media Source 相關
HLS 是由 Apple 提出的一個直播協議，他基本上是使用一個 m3u8 的檔案，裡面紀錄了各個 ts 影片或其他 m3u8 索引的檔名路徑等資訊。
#EXTM3U #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2149280,CODECS="mp4a.40.2,avc1.64001f",RESOLUTION=1280x720,NAME="720" url_0/193039199_mp4_h264_aac_hd_7.m3u8 #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=246440,CODECS="mp4a.40.5,avc1.42000d",RESOLUTION=320x184,NAME="240" url_2/193039199_mp4_h264_aac_ld_7.m3u8 #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=460560,CODECS="mp4a.40.5,avc1.420016",RESOLUTION=512x288,NAME="380" url_4/193039199_mp4_h264_aac_7.m3u8 #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=836280,CODECS="mp4a.40.2,avc1.64001f",RESOLUTION=848x480,NAME="480" url_6/193039199_mp4_h264_aac_hq_7.m3u8 #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=6221600,CODECS="mp4a.40.2,avc1.640028",RESOLUTION=1920x1080,NAME="1080" url_8/193039199_mp4_h264_aac_fhd_7.m3u8
Android 與 IOS 都支援這種直播格式，因此可以直接使用。但是其他平台的很多都不支援
那麼要如果想要播放 HLS 的時候，其他瀏覽器要怎麼辦呢？
這時候就要輪到 Media Source Extension 與 hls.js 這兩個東西出場了
這邊需要注意的是 hls.js 指的是一個 javascript library 並不是指 HLS 串流技術
Media Source Extension
允許 JavaScript 去動態的為 <audio> 和 <video> 建立 media stream。
簡單來說是可以讓 JavaScript 產生 Video 內容（產生方式無論是合併多個影片，例如插入廣告阿或者直接讀取影片檔案等，只要能用 JavaScript 處理完後交給瀏覽器各種方法都可以），然後讓瀏覽器播放。
以前都是直接給瀏覽器一個影片檔案的路徑，讓瀏覽器自行去下載並且播放。
hls.js
目前常見讀取 HLS 的 JavaScript Library。
他就是結合了 HLS 與 Media Source Extension 兩種技術，讓瀏覽器可以播放 m3u8。
hls.js 會讀取 HLS 的格式，解析 m3u8 的索引檔或者 ts 檔路徑等，以及其他資料。
之後透過 Media Source Extension 將解析 m3u8 之後取得的影片內容，交給瀏覽器播放。
但是要注意 hls.js 一樣不處理影片的解碼，所以最後影片能不能播還是取決於瀏覽器支不支援影片的格式。
HLS 用的 TS 檔案，格式大部份都這樣
Input #0, mpegts, from '193039199_mp4_h264_aac_hd_7.ts': Duration: 00:00:10.02, start: 40.010289, bitrate: 3666 kb/s Program 1 Metadata: service_name : lumberjack service_provider: lumberjack Stream #0:0[0x101]: Audio: aac (LC) ([15][0][0][0] / 0x000F), 44100 Hz, stereo, fltp, 128 kb/s Stream #0:1[0x102]: Video: h264 (High) ([27][0][0][0] / 0x001B), yuv420p, 1280x720 [SAR 1:1 DAR 16:9], 60 fps, 60 tbr, 90k tbn, 120 tbc
Reference
Flash 各版本支援的格式
Chromium 支援的 container 與 codec 格式
Can I use 查詢各瀏覽器支援的功能
