開(kāi)源精選》是我們分享Github、Gitee等開(kāi)源社區(qū)中優(yōu)質(zhì)項(xiàng)目的欄目，包括技術(shù)、學(xué)習(xí)、實(shí)用與各種有趣的內(nèi)容。本期推薦的是一個(gè)開(kāi)源的HTML5流媒體播放器——PearPlayer.js。

PearPlayer是完全用JavaScript寫(xiě)的開(kāi)源HTML5流媒體播放框架，實(shí)現(xiàn)了融合HTTP（含HTTPS、HTTP2）和WebRTC的多協(xié)議、多源、低延遲、高帶寬利用率的無(wú)插件Web客戶(hù)端流媒體加速能力。基于H5的MSE（Media Source Extension）技術(shù)將來(lái)自多個(gè)源節(jié)點(diǎn)的Buffer分塊喂給播放器，再加上精心設(shè)計(jì)的算法可實(shí)現(xiàn)最優(yōu)的調(diào)度策略及對(duì)各種異常情況的處理，PearPlayer由此能在保證用戶(hù)流暢視頻體驗(yàn)的前提下最大化P2P率。

PearPlayer特性

• P2P能力基于WebRTC，無(wú)須安裝任何插件
• 多協(xié)議(HTTP、HTTPS、WebRTC)、多源
• 自研的調(diào)度算法，在保證用戶(hù)流暢視頻體驗(yàn)的前提下最大化P2P率
• 默認(rèn)無(wú)需填參數(shù)（內(nèi)部根據(jù)視頻碼率等作自適應(yīng)），高級(jí)使用模式下可自行調(diào)整算法和參數(shù)
• 默認(rèn)不會(huì)無(wú)限制緩沖，盡可能為CP用戶(hù)節(jié)省帶寬/流量
• 支持Chrome、Firefox、Opera、IE、Edge等主流瀏覽器，即將支持Safari、騰訊微信、X5/TBS（可多源傳輸，播放問(wèn)題待不久后由MSE支持完善）
• 可選接入低成本、高可用的Pear Fog CDN
• 協(xié)議默認(rèn)通過(guò)TLS/DTLS全加密，無(wú)DPI特征；并可通過(guò)Pear Fog組件的動(dòng)態(tài)端口映射進(jìn)一步消除統(tǒng)計(jì)學(xué)特征
• 像使用HTML5 <video>標(biāo)簽一樣簡(jiǎn)單，并易與video.js等流行播放框架集成
• 具備Browser P2P能力（基于WebTorrent）

使用方法

首先通過(guò)script標(biāo)簽導(dǎo)入pear-player.min.js：

<script src="./dist/pear-player.min.js"></script>

或者使用CDN：

<script src="https://cdn.jsdelivr.net/npm/pearplayer@latest"></script>

假設(shè)用video標(biāo)簽播放以下視頻，HTML如下：

<video id="pearvideo" src="https://qq.webrtc.win/tv/Pear-Demo-Yosemite_National_Park.mp4" controls>

只需以下幾行代碼，即可將PearPlayer綁定到video標(biāo)簽：

<script>

/**

* 第一個(gè)參數(shù)為video標(biāo)簽的id或class

* opts是可選的參數(shù)配置

*/

if (PearPlayer.isMSESupported()) {

var player = new PearPlayer('#pearvideo', opts);

}

</script>

至此，就已經(jīng)添加播放器了，無(wú)需任何插件。

開(kāi)源地址：https://gitee.com/PearInc/PearPlayer.js

eb項(xiàng)目開(kāi)發(fā)中視頻播放是一個(gè)非常常見(jiàn)的需求，需要播放器能夠支持pc端和移動(dòng)端的使用，并且支持常見(jiàn)的視頻格式。我們從github上精選了5款優(yōu)秀的Html5 播放器插件分享給大家。（排名不分先后）

1. Ckplayer

ckplayer是一款在網(wǎng)頁(yè)上播放視頻的開(kāi)源軟件，主要特點(diǎn)是：開(kāi)源，功能強(qiáng)大，不依賴(lài)其它插件，二次開(kāi)發(fā)方便。

ckplayer基于MIT協(xié)議開(kāi)源。

當(dāng)家官網(wǎng)最新版本是X2，更新時(shí)間：2020.09.20。

軟件下載后，使用到的文件如下：

一般項(xiàng)目只用到ckplayer.min.js 、ckplayer.swf、language.json、sytle.json 總大小不超過(guò)700k。

ckplayer 支持flv、mp4、m3u8、webm等。

功能上常用的播放控制、彈幕、貼片廣告都支持。

2、 Media-element.js

HTML5<audio>或<video>播放器，支持MP4、WebM和MP3，以及HLS、Dash、YouTube、Facebook、SoundCloud和其他具有通用HTML5 MediaElement API的播放器，在所有瀏覽器中實(shí)現(xiàn)一致的UI。

支持視頻和音頻播放，主要強(qiáng)調(diào)在多終端上的界面一致性。

最新版本4.2.17，更新日期：2021-7-6

使用基本功能只需要mediaelement-and-player.min.js、renderers/vimeo.min.js、renderers/twitch.min.js，大小在300k左右，非常小巧。

重點(diǎn)：提供插件機(jī)制，通過(guò)插件可以實(shí)現(xiàn)常見(jiàn)的播放列表、AirPlay、位置標(biāo)記、視頻預(yù)覽等功能。

3、 VideoJs

開(kāi)源HTML5和Flash視頻播放器。目前多很大廠在使用。官網(wǎng)宣稱(chēng)世界上最流行的開(kāi)源html5播放器。

支持的視頻格式有：mp4，webm，ogv。

最新版本7.14.3, 更新時(shí)間：2021-7-27

文件大小約：700k。

4、 Dplayer

非常可愛(ài)的html5 彈幕視頻播放器。主打彈幕功能，支持MP4、HLS、FLV、WebTorrent播放，提供彈幕接口。

國(guó)人開(kāi)發(fā)，有中文文檔。國(guó)內(nèi)很多公司在用。

最新版本v1.26.0 更新日期：2020-6-11

基本功能使用文件大小161k. 另外也提供了很多插件供使用。

5、 Xgplayer

西瓜視頻播放器（HTML5）、一款帶解析器、能節(jié)省流量的HTML5視頻播放器。字節(jié)跳動(dòng)提供的開(kāi)源視頻播放器。

• PC Web端支持直接播放mp4視頻，播放HLS、FLV、MPEG-DASH需要瀏覽器支持Media Source Extensions
• iOS系統(tǒng)Web場(chǎng)景支持直接播放mp4和HLS，不支持播放FLV、MPEG-DASH
• 安卓系統(tǒng)Web場(chǎng)景支持直接播放mp4和HLS，播放FLV、MPEG-DASH需要瀏覽器支持Media Source Extensions

中文文檔寫(xiě)得很非常全面。支持airplay、彈幕等功能。

支持視頻、音頻播放。基于插件機(jī)制，提供了豐富的插件來(lái)擴(kuò)展播放器的功能。官網(wǎng)提供在線生成器來(lái)簡(jiǎn)化各種參數(shù)的配置，如下圖：

推薦使用。

今天為大寫(xiě)整理了5個(gè)優(yōu)秀的開(kāi)源視頻播放器的內(nèi)容，后期會(huì)再更新各個(gè)播放器的詳細(xì)使用并進(jìn)行詳細(xì)的評(píng)測(cè)，謝謝大家。

TML5自帶了一個(gè)原生視頻播放器。它在瀏覽器中配備了簡(jiǎn)單的用戶(hù)界面、功能和一些基本的控件。盡管通過(guò)瀏覽器的默認(rèn)視頻播放器的功能完美運(yùn)行，但用戶(hù)界面并不那么美觀和時(shí)尚，總體上并不令人滿(mǎn)意。

因此，大多數(shù)現(xiàn)代Web應(yīng)用程序和平臺(tái)，如Udemy、Netflix、YouTube和Amazon Prime，不會(huì)將默認(rèn)內(nèi)置的HTML5視頻播放器提供給他們的用戶(hù)。相反，他們會(huì)構(gòu)建自己定制的版本，具有時(shí)尚的用戶(hù)界面，使其平臺(tái)更具吸引力和用戶(hù)友好性。

如果你曾經(jīng)好奇這些公司和Web平臺(tái)是如何完成這樣的壯舉的，那么本文就是為你而寫(xiě)的。

在按照逐步指南進(jìn)行操作時(shí)，您將獲得一些實(shí)踐經(jīng)驗(yàn)，該指南將教您如何構(gòu)建和自定義自己的HTML5視頻播放器。您將學(xué)習(xí)如何自定義用戶(hù)界面、擴(kuò)展功能，并構(gòu)建自己的出色的自定義控件和功能。

您還將學(xué)習(xí)如何僅使用瀏覽器中提供的原生Video API來(lái)構(gòu)建所有這些功能——無(wú)需外部庫(kù)或工具。

（本文內(nèi)容參考：java567.com）