Latest

2021年更新： Video.js 文件有更新與 React 整合範例，有加入 使用 useEffect 的寫法。 而除了 Video.js 官方範例外，實務上開發者也會將 Videojs 包成一個自己的 custom hook 再去呼叫，故這篇現在建議看看就好。 今天的內容會用 React + Video.js 去做出自己的 React 播放器元件。 前端在使用 React 開發網站時，有時會碰到第三方套件沒有 React 版本，而需要自己去整理、調整程式碼。 幸運的是：Video.js 文件有與 React 整合的例子 ( 雖然就只有這一頁 )。 開發環境： 使用 create-react-app 建立環境。 建好環境後刪除 src 資料夾不必要的檔案

今天到29天都會以 Video.js 播放器為主 Video.js 是一款開源播放器，它是一個經典的 JS 播放器，從2010至今，中間歷經數次版本迭代，目前已到了第7版，這個播放器的特色是： 1. Github 23053 顆星星 2. Plugin 豐富 3. 可透過 Plugin 支援多種格式、協議影片 4. 可在 HTML5、Flash 間切換 5. 文件齊全到過於瑣碎 6. 不少JS播放器在設計上皆受到 Video.js 啟發 原先 Video.js 要播放 Hls 協議影片，需要特別引入 Video.js 的 Hls Plugin

今天來簡介 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 快速入門：建立 react-player

今天來簡介 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 react-dom 但如果你本地已裝完 react、react-dom，或者是用

今天來介紹西瓜播放器 (又稱 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-plyr