整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
開源精選》是我們分享Github、Gitee等開源社區中優質項目的欄目，包括技術、學習、實用與各種有趣的內容。本期推薦的是一個開源的HTML5流媒體播放器——PearPlayer.js。
PearPlayer是完全用JavaScript寫的開源HTML5流媒體播放框架，實現了融合HTTP（含HTTPS、HTTP2）和WebRTC的多協議、多源、低延遲、高帶寬利用率的無插件Web客戶端流媒體加速能力。基于H5的MSE（Media Source Extension）技術將來自多個源節點的Buffer分塊喂給播放器，再加上精心設計的算法可實現最優的調度策略及對各種異常情況的處理，PearPlayer由此能在保證用戶流暢視頻體驗的前提下最大化P2P率。
首先通過script標簽導入pear-player.min.js：
<script src="./dist/pear-player.min.js"></script>或者使用CDN：
<script src="https://cdn.jsdelivr.net/npm/pearplayer@latest"></script>假設用video標簽播放以下視頻，HTML如下：
<video id="pearvideo" src="https://qq.webrtc.win/tv/Pear-Demo-Yosemite_National_Park.mp4" controls>只需以下幾行代碼，即可將PearPlayer綁定到video標簽：
<script>
/**
* 第一個參數為video標簽的id或class
* opts是可選的參數配置
*/
if (PearPlayer.isMSESupported()) {
var player = new PearPlayer('#pearvideo', opts);
}
</script>至此，就已經添加播放器了，無需任何插件。
開源地址：https://gitee.com/PearInc/PearPlayer.js
eb項目開發中視頻播放是一個非常常見的需求，需要播放器能夠支持pc端和移動端的使用，并且支持常見的視頻格式。我們從github上精選了5款優秀的Html5 播放器插件分享給大家。（排名不分先后）
ckplayer是一款在網頁上播放視頻的開源軟件，主要特點是：開源，功能強大，不依賴其它插件，二次開發方便。
ckplayer基于MIT協議開源。
ckplayer示例圖
當家官網最新版本是X2，更新時間：2020.09.20。
軟件下載后，使用到的文件如下：
ckplayr 文件
一般項目只用到ckplayer.min.js 、ckplayer.swf、language.json、sytle.json 總大小不超過700k。
ckplayer 支持flv、mp4、m3u8、webm等。
功能上常用的播放控制、彈幕、貼片廣告都支持。
2、 Media-element.js
HTML5<audio>或<video>播放器，支持MP4、WebM和MP3，以及HLS、Dash、YouTube、Facebook、SoundCloud和其他具有通用HTML5 MediaElement API的播放器，在所有瀏覽器中實現一致的UI。
media-element.js 示例圖
支持視頻和音頻播放，主要強調在多終端上的界面一致性。
最新版本4.2.17，更新日期：2021-7-6
media-element 所需文件截圖
使用基本功能只需要mediaelement-and-player.min.js、renderers/vimeo.min.js、renderers/twitch.min.js，大小在300k左右，非常小巧。
重點：提供插件機制，通過插件可以實現常見的播放列表、AirPlay、位置標記、視頻預覽等功能。
3、 VideoJs
開源HTML5和Flash視頻播放器。目前多很大廠在使用。官網宣稱世界上最流行的開源html5播放器。
video.js
支持的視頻格式有：mp4，webm，ogv。
最新版本7.14.3, 更新時間：2021-7-27
video.js 文件
文件大小約：700k。
4、 Dplayer
非常可愛的html5 彈幕視頻播放器。主打彈幕功能，支持MP4、HLS、FLV、WebTorrent播放，提供彈幕接口。
國人開發，有中文文檔。國內很多公司在用。
最新版本v1.26.0 更新日期：2020-6-11
dplayer文件
基本功能使用文件大小161k. 另外也提供了很多插件供使用。
5、 Xgplayer
西瓜視頻播放器（HTML5）、一款帶解析器、能節省流量的HTML5視頻播放器。字節跳動提供的開源視頻播放器。
中文文檔寫得很非常全面。支持airplay、彈幕等功能。
支持視頻、音頻播放。基于插件機制，提供了豐富的插件來擴展播放器的功能。官網提供在線生成器來簡化各種參數的配置，如下圖：
推薦使用。
今天為大寫整理了5個優秀的開源視頻播放器的內容，后期會再更新各個播放器的詳細使用并進行詳細的評測，謝謝大家。
TML5自帶了一個原生視頻播放器。它在瀏覽器中配備了簡單的用戶界面、功能和一些基本的控件。盡管通過瀏覽器的默認視頻播放器的功能完美運行，但用戶界面并不那么美觀和時尚，總體上并不令人滿意。
因此，大多數現代Web應用程序和平臺，如Udemy、Netflix、YouTube和Amazon Prime，不會將默認內置的HTML5視頻播放器提供給他們的用戶。相反，他們會構建自己定制的版本，具有時尚的用戶界面，使其平臺更具吸引力和用戶友好性。
如果你曾經好奇這些公司和Web平臺是如何完成這樣的壯舉的，那么本文就是為你而寫的。
在按照逐步指南進行操作時，您將獲得一些實踐經驗，該指南將教您如何構建和自定義自己的HTML5視頻播放器。您將學習如何自定義用戶界面、擴展功能，并構建自己的出色的自定義控件和功能。
您還將學習如何僅使用瀏覽器中提供的原生Video API來構建所有這些功能——無需外部庫或工具。
（本文內容參考：java567.com）
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
