This is an open source HTML5 streaming media player——PearPlayer.js。

PearPlayer is an open source HTML5 streaming media framework written entirely in JavaScript, which realizes the multi-protocol, multi-source, low latency, high bandwidth utilization of the integration of HTTP (including HTTPS, HTTP2) and WebRTC without plug-in Web client streaming media acceleration capability. The Media Source Extension (MSE) technology based on H5 feeds Buffer blocks from multiple source nodes to the player, and the well-designed algorithm can realize the optimal scheduling strategy and handle various abnormal situations. This allows PearPlayer to maximize P2P rates while ensuring a smooth video experience for users.

PearPlayer features

• P2P capabilities are based on WebRTC and do not require any plug-in installation
• Multi-protocol (HTTP, HTTPS, WebRTC), multi-source
• Self-developed scheduling algorithm maximizes P2P rate under the premise of ensuring smooth video experience for users
• By default, there is no need to fill in parameters (internal adaptive according to video bit rate, etc.), and the algorithm and parameters can be adjusted by itself in advanced usage mode
• By default, there is no unlimited buffering, saving bandwidth/traffic for CP users as much as possible
• Support Chrome, Firefox, Opera, IE, Edge and other mainstream browsers, will soon support Safari, Tencent wechat, X5/TBS (can be multi-source transmission, playback problems will soon be supported by MSE)
• Optional access to the low-cost, highly available Pear Fog CDN
• By default, the protocol is fully encrypted through TLS/DTLS and has no DPI feature. Statistical features can be further eliminated through the Pear Fog component’s dynamic port mapping
• As simple as using HTML5 <video> tags and easy integration with popular playback frameworks such as video.js
• Browser P2P capability (based on WebTorrent)

method of application

First import pear-player.min.js via the script tag:

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

Or use a CDN:

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

Suppose you play the following video with the video tag, and the HTML is as follows:

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

Just a few lines of code to bind PearPlayer to the video tag:

<script>

/**

* The first parameter is the id or class of the video label

* opts is an optional parameter

*/

if (PearPlayer.isMSESupported()) {

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

}

</script>

At this point, the player has been added without any plugins.