Latest

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

在介紹各種 video player 之前，不免俗得先介紹<video>標籤。 <video> 是W3C 在 HTML5 規範新增的標籤，在<video>標籤出來之前，瀏覽器上要播放影片，多半會依賴 Flash plugin 來幫我們處理。而作為 HTML5 新增、所謂的 HTMLMediaElement ，<video>功能自然是播放影片。 影片支援 在不考慮引入任何 Library 或操作 Media Source Extensions API 之前 * MP4 <source> 上的 Media

今天來簡介什麼是媒體源擴展 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>元素外，也提供了不少網頁媒體擴展的

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

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

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