由于視頻更能形象的展示現(xiàn)實(shí)世界的內(nèi)容，如今的互聯(lián)網(wǎng)已經(jīng)離不開(kāi)視頻，視頻具有比單獨(dú)的文本或圖像更加有吸引力，也更能有效地傳達(dá)信息。現(xiàn)在各類平臺(tái)都在利用視頻播放器提供教程、演示、娛樂(lè)以及交互式互動(dòng)等內(nèi)容，以保持用戶參與度，提高留存率。

下面主要推薦一些比較好的JavaScript視頻播放器組件庫(kù)。

1.VideoJS（GitHub Star 37K）

https://github.com/videojs/video.js

VideoJS是一個(gè)HTML5視頻播放器，它使用的是瀏覽器中的HTML5視頻標(biāo)簽，并使用JavaScript來(lái)添加自定義控件、擴(kuò)展功能，并修復(fù)跨瀏覽器的錯(cuò)誤。

2.Plyr（Github star 26K）

https://github.com/sampotts/plyr

Plyr是一個(gè)易用、輕量級(jí)、可定制的HTML5媒體播放器，支持大部分最新瀏覽器。

3.HLS.js（Github star 14.5K）

https://github.com/video-dev/hls.js

HLS.js是一個(gè)實(shí)現(xiàn)了HTTP Live Streaming客戶端的JavaScript庫(kù)。它依賴于HTML5視頻和MediaSource。

HLS.js的工作原理是：將MPEG-2傳輸流和AAC/MP3流轉(zhuǎn)換為ISO BMFF（MP4）片段。當(dāng)瀏覽器中提供Web Worker時(shí)，使用Web Worker異步執(zhí)行變形。HLS.js可以直接在HTML標(biāo)準(zhǔn)元素之上運(yùn)行。并且支持HLS + fmp4。

HLS.js庫(kù)是用ECMAScript 6（.js）和TypeScript（.ts ES 6的強(qiáng)類型）編寫(xiě)的，并使用Babel和TypeScript編譯器在ECMAScript5中編譯。

4.Clappr（Github star 7K）

https://github.com/clappr/clappr

Clappr是一個(gè)高度可定制的HTML5視頻播放器。

相關(guān)資源： 

• Clappr.io：http://www.example.com
• Clappr API：https：//clappr.github.io/classes/Player.html
• GitHub文檔：https：//github.com/clappr/clappr-core 

5.Mediaelement（Github star 8.2K）

https://github.com/mediaelement/mediaelement

這是一個(gè)MP4、WebM和MP3的HTML5音頻或視頻播放器，也支持HLS、Dash、YouTube、Facebook、SoundCloud和其他HTML5通用MediaElement API，可在所有瀏覽器中實(shí)現(xiàn)一致的UI。

6.西瓜視頻播放器XGPlayer（Github star 8K）

https://github.com/bytedance/xgplayer

XGPlayer是一個(gè)web視頻播放器庫(kù)。基于一切都是組件化的原則，它被設(shè)計(jì)為一個(gè)獨(dú)立的、可拆分的UI組件。它不僅在UI層靈活，而且在功能上也很大膽：擺脫了視頻加載、緩存和對(duì)視頻格式的依賴。特別是在mp4上，它可以分段加載，因?yàn)樗恢С至魇絤p4。這意味著無(wú)縫切換、高清晰度、負(fù)載控制和視頻節(jié)流。它還集成了對(duì)FLV、HLS和Dash的按需、實(shí)時(shí)加載。

特性包括：

• 從底層解析 MP4、HLS、FLV 格式的視頻，有更廣的視頻播放使用場(chǎng)景
• 靈活的插件體系，PC / 移動(dòng)端自動(dòng)切換安全的白名單機(jī)制
• 強(qiáng)大的 MP4 視頻播放控制，點(diǎn)播無(wú)縫切換，帶寬節(jié)省顯著
• 擁有完整的產(chǎn)品機(jī)制，錯(cuò)誤的監(jiān)控上報(bào)和自動(dòng)的降級(jí)處理
• 在兼容性方面，xgplayer.js 支持直接播放 MP4 視頻：
• PC端播放HLS、FLV、MPEG-DASH需要瀏覽器支持 Media Source Extensions。
• iOS端支持直接播放 mp4 和 HLS。
• 安卓端支持直接播放 mp4 和 HLS，播放FLV、MPEG-DASH 需要瀏覽器支持 Media Source Extensions。

7.Shaka Player(Github Star 7K)

https://github.com/shaka-project/shaka-player

Shaka Player是一個(gè)用于自適應(yīng)媒體的開(kāi)源JavaScript庫(kù)。它在瀏覽器中播放自適應(yīng)媒體格式（如DASH，HLS和MSS），而無(wú)需使用插件或Flash。相反，Shaka Player使用開(kāi)放的Web標(biāo)準(zhǔn)MediaSource Extensions和Encrypted Media Extensions。

Shaka Player還支持使用IndexedDB離線存儲(chǔ)和播放媒體。內(nèi)容可以存儲(chǔ)在任何瀏覽器上。

8.Lightgallery.js（Github Star 5.3k）

https://github.com/sachinchoolur/lightGallery

Lightgallery是一個(gè)輕量級(jí)的、模塊化的JavaScript圖像和視頻燈箱畫(huà)廊插件。適用于React.js、Vue.js、Angular和TypeScript。是一個(gè)免費(fèi)功能齊全的JavaScript播放器，帶有幾十個(gè)視頻播放功能，且無(wú)外部依賴性。

9.H5player(Github Star 2.9K)

https://github.com/xxxily/h5player

這款h5播放器支持所有音視頻網(wǎng)站，比如TikTok、YouTube、Bilibili、TED、Instagram、Twitter等。

它的功能包括：可變播放速度，屏幕捕捉，視頻下載，自定義設(shè)置和擴(kuò)展等，為您提供愉快的在線音頻和視頻播放體驗(yàn)。

允許鍵盤(pán)快捷鍵進(jìn)行全程控制，支持播放速度控制、視頻截圖、畫(huà)中畫(huà)、網(wǎng)頁(yè)全屏、調(diào)節(jié)亮度、飽和度、對(duì)比度等功能，增強(qiáng)自定義配置可用性，為用戶提供愉悅的在線視頻播放體驗(yàn)。

10.Media Chrome（Github star 1.1K）

https://github.com/muxinc/media-chrome

Media Chrome是一個(gè)完全可定制化的媒體播放器控件，使用Web組件（本地自定義元素）。

 主要特性包括： 

• 兼容任何JavaScript框架（React，Angular，Svelte等）
• 與<video>和<audio>元素以及許多播放器（YouTube、HLS.js等）兼容
• 支持簡(jiǎn)單地添加/刪除HTML控件
• 支持簡(jiǎn)單地控制CSS樣式

實(shí)現(xiàn)案例如下：https://codepen.io/heff/pen/ZEGdBzN?editors=1000