《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的HTML5流媒体播放器——PearPlayer.js。

怎么切换html5播放器(一个开源的HTML5流媒体播放器)(1)

PearPlayer是完全用Javascript写的开源HTML5流媒体播放框架,实现了融合HTTP(含HTTPS、HTTP2)和WebRTC的多协议、多源、低延迟、高带宽利用率的无插件Web客户端流媒体加速能力。基于H5的MSE(Media Source Extension)技术将来自多个源节点的Buffer分块喂给播放器,再加上精心设计的算法可实现最优的调度策略及对各种异常情况的处理,PearPlayer由此能在保证用户流畅视频体验的前提下最大化P2P率。

PearPlayer特性

怎么切换html5播放器(一个开源的HTML5流媒体播放器)(2)

使用方法

首先通过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

,