Latest

今天來簡介 flowplayer flowplayer 是一款商業播放器，他的特色有： 相對老字號的播放器 1. 穩定成熟、功能多 2. github 星星 1686顆 3. 開發工具齊全：JavaScript API、SDK..完備 4. 跨平台 5. 支援多種影音格式 這邊說的功能多，是指播放器上大部分功能與擴充都包好了，基本上操作他們的 API 已足以應付大部分需求，缺點是要付費。 flowplayer 和昨天介紹 JWPLAYER 一樣，不只是提供播放器的 Library 給公司，而是整個影音平台、後台、分析工具、廣告功能都做得很完整，以 B2B影音服務為主。 以個人使用使用者來說，最便宜方案一個月25鎂(約700台幣)，一年大約 8400 元其實也還好。當然對商業影音公司來說，使用商業播放器的好處不言而喻，

今天來簡介 JWPLAYER JWPLAYER 是一款商業播放器，他的特色有： 1. 相對老字號的播放器 2. 穩定成熟、功能多 3. github 星星 1754 顆 4. 開發工具齊全：JavaScript API、SDK..完備 5. 跨平台 6. 支援多種影音格式 這邊說的功能多，是指播放器上大部分功能與擴充都包好了，基本上操作他們的 API 已足以應付大部分需求，缺點是，目前要付費。 雖然網路上可以找到不少JWPLATER的程式碼啦..。 而 JWPLAYER 在 GITHUB 上的 Project 目前是 Disclaimer 放棄的狀態。當然不是真的廢棄，從 GITHUB 的更新與 ISSUES 狀態來看還是可使用的。 且僅以要付錢的商用播放器來對 JWPLAYER

今天來介紹 clappr 播放器 clappr 是一款開源播放器，並可透過 Plugin 支援RTMP、DASH 與 FLV ，這個播放器的特色是： 1. Github 4419 顆星星 2. Plugin 豐富 3. 可透過 Plugin 支援多種格式、協議影片 ( MP4、FLV、HLS、webm、DASH..etc ) 4. 可在 HTML5、Flash 間切換 5. 文件齊全 安裝、引入 clappr CDN <script src="https://cdn.jsdelivr.net/npm/

前幾天介紹了幾個解析直播協議用 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&