整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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個優秀的開源視頻播放器的內容，后期會再更新各個播放器的詳細使用并進行詳細的評測，謝謝大家。
近我在使用的一款簡單容易集成的 web 視頻播放組件，支持播放 B站彈幕。
DPlayer 是一款基于 JavaScript 的 HTML5 彈幕視頻播放器，用于在 web 開發中實現視頻播放的功能，可以讓開發者輕松在 web 應用中嵌入視頻。
DPlayer 官網
現在以視頻作為傳播媒體的內容仍然處在一個非常火熱的發展階段，不知道常來我網站逛的各位開發者有沒有遇到要在項目中集成視頻播放的需求，我之前也用過 Tiny Player 這款小巧的播放器，不過支持的功能比較單一；而強大一點的 xgplayer 不支持彈幕，而這次需求要支持彈幕，無法滿足需求。
DPlayer 文檔
于是就花時間找了一下，發現了 DPlayer 這款播放器非常合適，于是順便寫一篇文章來推薦給大家。
流媒體格式：
視頻文件格式：
以 npm 為例，以及在 Vue.js 項目中使用：
npm install dplayer --saveVue 頁面中引入：
<template>
<div id="video"></div>
</template>
<script>
import DPlayer from 'dplayer';
// ... 省略無關代碼，初始化播放器
const dp=new DPlayer({
container: document.getElementById('video'),
video: {
url: 'https:///xxx.xxxx.mp4', // 視頻地址
},
});
</script>
這就完成一個基礎播放器了，非常簡單。當然 DPlayer 支持的功能也很多，官網提供了中文文檔，寫得很詳細，并且都配套了代碼例子，這里就不做過多示例了，在簡單理解視頻播放原理的前提下，幾乎不需要學習就能輕松集成到項目中，親測在手機端也可以使用。
DPlayer 參數列表
DPlayer 是一個免費開源的 HTML5 視頻播放器，由來自國內的開發者 DIYgod 開發，項目采用 MIT 開源協議，源碼托管在 Github 上，任何人都可以免費下載來使用和修改，也能用于商業項目中。
↓↓點擊查看本次分享的網站。
DPlayer - 免費開源、輕量簡潔的 HTML5 視頻播放器，支持彈幕播放、清晰度切換、倍速播放｜那些免費的磚
開源精選》是我們分享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
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
