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.