EasyPlayer.js:一款支持截图、录屏、低延迟的全能 H5 流媒体播放器
EasyPlayer.js 是一款全平台、多协议、多功能的 H5 视频播放器,主打一个我全都要"——截图、录屏、低延迟、全协议支持,开箱即用。
市面上常见的视频流协议,它基本都支持:
简单来说,你不需要因为后端换了一种协议,就重写前端的播放逻辑。一个 EasyPlayer.js 就能全搞定。
这个项目的亮点之一是对 H.265 的完整支持。很多浏览器原生不支持 H.265,EasyPlayer.js 提供了三种解码方案:
优先级上,播放器会按 MSE > WebCodec > WASM 自动选择,保证在性能和兼容性之间找到最佳平衡。
监控场景最常见的需求:用户看到可疑画面,需要快速截图保存。
EasyPlayer.js 内置截图功能,一行代码搞定:
// 截图并下载
player.screenshot("可疑画面", "png", 0.92, 'download');
// 获取 base64 用于上传
const base64 = player.screenshot("snapshot", "jpeg", 0.8, 'base64');很多场景需要本地录制视频片段,比如:
EasyPlayer.js 支持三种录制格式:
启用录屏功能很简单:
// 初始化时开启录屏按钮
const player = new EasyPlayerPro(container, {
isLive: true,
btns: {
record: true // 显示录屏按钮
}
});
// 或通过 API 控制录制
player.on('recordStart', () => {
console.log('开始录制');
});
player.on('recordEnd', (file) => {
console.log('录制完成', file);
});一个 EasyPlayer.js 就能全部搞定。
对于监控、直播场景来说,延迟是硬指标。EasyPlayer.js 提供了多种优化手段:
自动缓冲消除
const player = new EasyPlayerPro(container, {
bufferTime: 1, // 最小缓冲时长 1 秒
loadTimeOut: 10, // 加载超时 10 秒
loadTimeReplay: 3 // 断线重连 3 次
});bufferTime 参数是关键——它会自动消除累积延迟,保证直播流的实时性。
WebRTC 支持
对于延迟要求极低的场景,还可以使用用 WebRTC 模式:
const player = new EasyPlayerPro(container, {
isLive: true,
isRtcSRS: true // 或 isRtcZLM: true,取决于你的流媒体服务器
});cEasyPlayer.js 支持 SRS 和 ZLMediaKit 两种主流的 WebRTC 流媒体方案。
在 Web 视频播放这个领域,EasyPlayer.js 走了一条"我全都要"的路。
不拼概念,不堆术语。协议支持全一点,功能内置多一点,开发者省事一点。
有时候,一个能搞定所有场景的工具,比十个各管一摊的插件更值钱。
阅读原文:https://mp.weixin.qq.com/s/uA2Cpt6odzxYqJSvgQvWhw