整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢(xún)熱線:

          一個(gè)開(kāi)源的HTML5流媒體播放器

          開(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)源。


          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)源視頻播放器。

          • 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)


          主站蜘蛛池模板: 国产成人精品一区二区三区免费 | 日本成人一区二区三区| 国产凸凹视频一区二区| 真实国产乱子伦精品一区二区三区 | 少妇激情一区二区三区视频| 国产一区二区在线|播放| 亚洲av无码一区二区三区乱子伦| 国产一区二区三区不卡在线观看| 蜜臀AV一区二区| 国产午夜精品一区理论片| 日亚毛片免费乱码不卡一区| 亚洲欧洲无码一区二区三区| 无码毛片视频一区二区本码 | 99精品国产高清一区二区| 国产免费一区二区三区免费视频 | 丰满人妻一区二区三区免费视频| 精品国产一区二区二三区在线观看 | 中文字幕在线一区二区在线| 人妻少妇一区二区三区| 成人免费视频一区二区| 日韩美女在线观看一区| 无码国产精品一区二区免费| 久久久国产精品亚洲一区| 又硬又粗又大一区二区三区视频| 日韩动漫av在线播放一区| 国产无人区一区二区三区 | 亚洲另类无码一区二区三区 | 免费萌白酱国产一区二区三区| 麻豆一区二区三区蜜桃免费| 国产精品一区二区三区高清在线| 无码人妻精品一区二区蜜桃| 人妖在线精品一区二区三区| 无码视频一区二区三区在线观看| 久久精品无码一区二区三区日韩 | 无码精品前田一区二区| 精品一区二区三区影院在线午夜| 国产精品一区二区资源| 国产女人乱人伦精品一区二区| 濑亚美莉在线视频一区| 国产一区在线视频观看| 日韩毛片一区视频免费|