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

Day16 flv.js

今天來快速認識 flv.js 。 FLV 影片格式 ( Flash Video ) 無法直接在瀏覽器播放,一般多會藉 RTMP 協議將 FLV 傳輸給前端,在網頁前端透過 Flash 去解碼播放。而 flv.js 則是走 HTTP 協議,這種讓 FLV 透過 HTTP 協定在瀏覽器播放的技術,也稱為 http-flv。 如果不仰賴 Flash ,FLV 影片本身是無法在瀏覽器上仍播放的,中國影音公司 bilibili 的開源 Library flv.js,就是為了解決依賴 Flash 的困境。 flv.js 背後有一段可歌可泣的故事。 安裝、引入 flv.js cdn
SimonAllen

Day15 dash.js

今天來快速認識 dash.js。 DASH 直播協議目前在大部分瀏覽器上仍無法播放,這時通常會引入一些第三方 Library 來幫我們解決這個問題。其中最主要的 Library 就是 dash.js 。 DASH 協議在各瀏覽器支援度 而 dash.js 是透過 JavaScript 與 Media Source Extensions API 整合撰寫的 Library, 顧名思意就是幫助瀏覽器播放 DASH 協議的影片。 安裝、引入 dash.js 官方提供兩種方式,一種是透過 Nodejs + Grunt ,一種是 CDN 。 Grunt 鑑於 grunt 現在很少人用了,這裡以 CDN 為例子。 cdn 引入 dash.
SimonAllen

Day14 Hls.js

今天來快速認識 Hls.js。 HLS 直播協議目前在某些瀏覽器上仍無法播放,這時通常會引入一些第三方 Library 來幫我們解決這個問題,其中最主要的 Library 就是 Hls.js 。 HLS 協議在各瀏覽器支援度 而 Hls.js 是透過 JavaScript 與 Media Source Extensions API 整合撰寫的 Library, 顧名思意就是幫助瀏覽器播放 HLS 協議的影片。 安裝、引入 Hls.js cdn 引入 Hls.js <script src="https://cdn.jsdelivr.net/npm/hls.js@latest&
SimonAllen

Day12 自訂 <video> 介面

今天來看如何自訂<video>介面 作為前端工程師,我們都知道:各瀏覽器預設 HTML 的樣式不同,所以在處理網頁切板時,通常會引入reset.css 或 normalize.css 來幫我們統一各瀏覽器樣式,接著才撰寫 CSS 去修改 HTML 。 然而,不管是 reset.css 或 normalize.css 都沒有去修改到<video>樣式,這就是前端再處理<video>麻煩的地方:播放器在各瀏覽器預設樣式的不同。 當然我們可選擇使用別人寫好的播放器 Plugin、Library來統一風格,或是乾脆自己刻一個。這裡我們來介紹一般如何自訂播放器介面的流程,後續 CSS 的部分有興趣的人可以自己嘗試: 1.隱藏原生介面 <
SimonAllen

Day10 Media Source Extensions 媒體源擴展

今天來簡介什麼是媒體源擴展 Media Source Extensions 此篇並不會介紹詳細的使用方法,想瞭解具體用法可見文章最末參考資源。 前幾天講了一些直播協議:HLS、DASH、HTTP-FLV..等,當瀏覽器無法支援播放時,通常會引入一些 Library 來協助影片能正常顯示運作。 不管是能解析 HLS 協議的 HLS.js 、 解析 MPEG-DASH 協議的 DASH.js 、 幫助前端轉譯 HTTP-FLV 的 FLV.js ,為什麼引入這些 Library就能解決問題?這些 JavaScript Library 是怎麼做到的? 這要追朔到當初 W3C 組織制定完 HTML5 標準時,除了新增<video>元素外,也提供了不少網頁媒體擴展的 API ,稱為 Media
SimonAllen