ithome 鐵人賽:前端影片與直播筆記

Day09 HTTP-FLV 簡介

今天來簡介 HTTP-FLV。 以影音串流來說,影像編碼是影像編碼;影片是影片(容器檔案);直播協議是傳輸協議,這都是不同的事情, HTTP-FLV,以字面上來看的話,它指的其實是將 FLV 透過 HTTP 協議傳送到前端 , 也就是像 HLS 那樣,所以把它單獨抽出來和 HLS、DASH、RTMP 並列會有點微妙,但它確實和 HLS (.m3u8) 有些差異。 在之前 FLV 和 RTMP 協議的文章都有提到:FLV 的 F 是 Flash ,這個影片格式多半藉由 RTMP 協議,從後端扔給前端播放。現行瀏覽器,要想播放 RTMP ,就需要開啟 Flash ,否則網頁是無法播放 RTMP 的。 而
SimonAllen

Day08 DASH ( MPEG-DASH ) 直播協議簡介

今天來簡介 DASH 直播協議。 DASH 全名 Dynamic Adaptive Streaming over HTTP ,它是由 MPEG 開發的直播協議,因此 DASH 又稱為 MPEG-DASH。 如果說 HLS 是蘋果為了反對 Flash 與 RTMP 衍生的直播協議,那 DASH 的出現就是為了與蘋果的 HLS 分庭抗禮, HLS 並非國際標準直播協議,只因為科技公司領導者:蘋果大推而成為主流 ( 雖然 HLS 確實有可取之處 )。相較 HLS 受制於蘋果私有, DASH 的修改比較嚴謹標準一點,因為它是真正的 國際規範標準 ,畢竟 MPEG 所屬的組織是 ISO(國際標準組織)。 DASH 對影像的編碼限制不大,
SimonAllen

Day07 RTMP 直播協議簡介

今天來簡介 RTMP 直播協議。 RTMP 全名 Real-Time Messaging Protocol ,是由 Adobe 所有的媒體傳輸協議,其走的是 TCP 協議,RTMP 有很多兄弟協議(例如 RTSP )或衍生協議(例如 RTMPS ),可以參考維基百科。 既然是 Adobe 所屬,RTMP 所傳輸的影片自然是以 FLV 為主,當然 RTMP 影片也可以是非直播 (具有明確片長、完整的影片) ,這個直播協議的即時性很好,延遲也比較小。 一個 RTMP 的影片連結是長這樣 rtmp://184.72.239.149/vod/BigBuckBunny_115k.mov 我們可以用 HLS
SimonAllen

Day06 HLS 直播協議簡介

今天來介紹 HLS 直播協議。 HLS 全名 HTTP Live Streaming ,是由蘋果提出的媒體傳輸協議,看到 HTTP 一詞,就知道這個協議是走HTTP協定的。 HLS的影片不一定要是直播影片,也可以是非直播 (具有明確片長、完整的影片),其核心是 .m3u8 與 .ts 這兩個檔案,與其說 m3u8 是個影片檔案,倒不如說, .m3u8 只是個文件,這個文件記錄了影片檔的位置與其設定。 而 HLS 的原理,其實是將影片拆成一個一個的.ts檔案,每個.ts 就是幾秒影片片段,.ts封裝了影像與聲音,透過 HTTP 協定扔給前端,藉此連續播放一個個不同的片段,來達成影片的播放 ( 注意這裡的 .ts 不是指 TypeScript )。 一個 HLS 的影片連結會是這樣:
SimonAllen

Day05 幾個小工具

今天先來分享一些小工具,前端接到串影片的任務,在研究階段,除了公司的影片外,有時也會找非公司的影片源來測,這個時候只能上網找影片連結或工具來用。 桌面應用程式 Postman 前端向後端索取影片,本質上還是發出一個 GET/POST 請求,因此透過Postman也可以檢查索取的狀況或吐回的東西。 VLCplayer 相當好用的播放器,也可以在本地端電腦播放網路串流影片,缺點是要下載 VLCplayer 回來安裝。 Chrome 擴充套件 Native HLS Playback 以 HLS.js 製作的 Chrome擴充套件,非常方便,直接以 HLS 直播連結另開 Chrome 新分頁(或輸入到網址列)就能播放了。 Native MPEG-Dash + HLS Playback 與 Native HLS Playback 類似,如果也想觀看 Dash 的話,
SimonAllen

Day04 FLV、F4V

今天來快速介紹 FLV 在 HTML5 出來以前, FLV 是網路上最流行的影片格式,相信大家對這個格式也不陌生。 FLV 全名 FLASH VIDEO,看到 FLASH 一詞就知道和 Adobe 有關係。 而F4V 這個格式,其實是 FLV 的後繼格式。因為 FLV 主要採用的是 H.263 影像編碼格式,雖然影音檔是個容器, 但 FLV 對 後續推出的 H.264 影像編碼還是有極限在,於是 Adobe 推出了 F4V 格式,其主要採用的就是 H.264 影像編碼格式, F4V 的 4 指的是 MPEG-4
SimonAllen

Day03 MPEG、MP4 與 H.264

今天要簡介 MP4,但要講 MP4 就不得不先介紹,什麼是 MPEG: MPEG MPEG 是 ISO( 國際標準組織 )在1988年所成立的工作小組之一:由眾多成員組成的影音組織群組 Moving Picture Experts Group 簡稱,這個組織制定了多個影音/圖像編碼標準,因此這些編碼或壓縮標準也被稱為 MPEG 系列。 MPEG-1 MPEG-1 系列是由MPEG制定的第一個影音壓縮標準,早期的VCD就是廣泛用到了MPEG-1 系列的影音壓縮標準。 MPEG-2 MPEG-2 系列是由MPEG制定的另一個影音壓縮標準,這個系列的影、音編碼被廣泛用在DVD中。(可以說是大家最親切常用的壓縮標準) MPEG-3 MPEG-3 不是 MP3 MPEG-3 不是 MP3 MPEG-3 不是 MP3 MPEG-3 系列在制訂時,發現與MPEG-2有點類似,就被併入MPEG-2 系列中了。
SimonAllen