SimonAllen

今天來簡介 react-player react-player 是一款強大的 React 播放器元件，雖然名子冠上了「react」-player，但不使用 react 也可以使用此播放器，它的特色有： 1. github 星星 1735 顆 2. 可播放 YouTube、SoundCloud、Facebook、Vimeo、Twitch...等等媒體影片 3. 可播放多種格式、協議影片 4. 不使用 React 也可使用此一播放器 可以玩玩看官方的DEMO 安裝 沒有看到官方的 CDN 連結，這裡一樣用 Node.js 當例子 NPM npm install react-player --save

今天來簡介 video-react video-react 是一款 React 播放器元件，其 UI、Options 皆受到了 video.js 的啟發。 video.js 之後幾天會介紹 video-react的特色有： 1. Github 945 顆星星 2. 以videojs為啟發建立的播放器元件 3. 播放器介面的彈性、元件化 安裝、引入 video-react npm JS的部分，官方網站看起來並無 JS 的 cdn 連結，所以得在Node環境下使用NPM，官方範例 install 是這樣寫： npm install --save video-react react

今天來介紹西瓜播放器 (又稱 xgplayer ) 西瓜播放器 是由中國西瓜視頻所開發維護的播放器。 xgplayer 播放器的特色有： 1. Github 1005 顆星星 2. 可支援多種格式、協議影片 ( MP4、HLS、WEBM、DASH..etc ) 3. 主張播放器萬物皆組件(Plugins) 可自由使用、擴增功能 4. 文件齊全詳細(中文) 5. 有官方自己推出的 React 、 Vue 版本可使用 安裝、引入 西瓜播放器 CDN <script src="//cdn.jsdelivr.net/npm/xgplayer@1.1.3/browser/index.

今天來介紹 Dplayer 播放器 Dplayer 是由中國開發者製作的播放器，最初只是作者的畢業專題作品，到了現在 Dplayer 已成為一個功能成熟強大的播放器。 Dplayer 播放器的特色有： 1. Github 4075 顆星星 2. 彈幕功能 3. Plugin 豐富 4. 可透過 MSE 媒體源擴展 支援多格式、協議影片 5. 文件齊全(中文) 安裝、引入 Dplayer CDN CSS <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dplayer/1.

今天來介紹 plyr 播放器 plyr 是一款開源播放器，並可透過 Plugin 支援RTMP、DASH 與 FLV ，這個播放器的特色是： 1. Github 12367 顆星星 2. 可透過 Plugin 支援多種格式、協議影片 ( MP4、FLV、HLS、webm、DASH..etc ) 3. 可在 HTML5、Flash 間切換 4. 支援播放 YouTube 與 Vimeo 影片 5. 極為輕量，plyr.min.js 僅有 95.6 KB 6. 有 vue-

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