開(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率。
首先通過(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 播放器插件分享給大家。(排名不分先后)
ckplayer是一款在網(wǎng)頁(yè)上播放視頻的開(kāi)源軟件,主要特點(diǎn)是:開(kāi)源,功能強(qiáng)大,不依賴(lài)其它插件,二次開(kāi)發(fā)方便。
ckplayer基于MIT協(xié)議開(kāi)源。
ckplayer示例圖
當(dāng)家官網(wǎng)最新版本是X2,更新時(shí)間:2020.09.20。
軟件下載后,使用到的文件如下:
ckplayr 文件
一般項(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。
media-element.js 示例圖
支持視頻和音頻播放,主要強(qiáng)調(diào)在多終端上的界面一致性。
最新版本4.2.17,更新日期:2021-7-6
media-element 所需文件截圖
使用基本功能只需要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播放器。
video.js
支持的視頻格式有:mp4,webm,ogv。
最新版本7.14.3, 更新時(shí)間:2021-7-27
video.js 文件
文件大小約:700k。
4、 Dplayer
非常可愛(ài)的html5 彈幕視頻播放器。主打彈幕功能,支持MP4、HLS、FLV、WebTorrent播放,提供彈幕接口。
國(guó)人開(kāi)發(fā),有中文文檔。國(guó)內(nèi)很多公司在用。
最新版本v1.26.0 更新日期:2020-6-11
dplayer文件
基本功能使用文件大小161k. 另外也提供了很多插件供使用。
5、 Xgplayer
西瓜視頻播放器(HTML5)、一款帶解析器、能節(jié)省流量的HTML5視頻播放器。字節(jié)跳動(dòng)提供的開(kāi)源視頻播放器。
中文文檔寫(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)
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。