ithome

前幾天介紹了幾個解析直播協議用 Libtary ，今天開始會進入播放器的部分。 今天介紹的是 sewise-player 播放器 ，它是由中國視智雲公司所製作開源的播放器。 視智雲 這個播放器的特色是： 1. 有中文文件 2. 背後有公司在撐腰 ( 相對穩一點 ) 3. 可以播放多種格式、協議影片 ( mp4、m3u8、oga、webm、theora、flv..etc ) 4. 可在 HTML5、Flash 間切換 安裝、引入 sewise-player <script> 引入 sewise-player.js 因為找不到CDN連結，還是要從官網或 github 上把 JS 檔案拉下來。 <script type="text/javascript&

今天來快速認識 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

今天來快速認識 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.

今天來快速認識 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&

今天來介紹字幕與<track>。 在網頁觀看影片時，常見的 CC 字幕其實是利用<track>標籤，引入對應字幕檔案.vtt，使其在影片上能顯示對應的字幕。 使用方式 將<track>標籤放在<video>內 <video> <track> </video> 結束收工 屬性 <track>標籤也有自己的屬性可以添加，屬性如下 屬性 值 說明 kind captions、chapters、descriptions、metadata、subtitles

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