easyplayer 前端播放器
文章目录
概要
需求是对接flv视频流，本来打算用b站的flv去做，做出来以后发现延迟高，加载慢，然后查找了一下，找到了这个。
EasyPlayer.js集播放http-flv, hls, websocket 于一身的H5视频直播/视频点播播放器, 使用简单, 功能强大。
功能说明
- 支持 MSE H264和H265硬解码;
- 支持 WebCodec H264和H265硬解码;
- 支持 WASM H264和H265硬解码/软解码;
- 支持 m3u8/HLS (H265/H265)播放;
- 支持 Mpeg4格式(H264)播放;
- 支持 HTTP-FLV/WS-FLV (H265/H265)播放;
- 支持 HTTP-FMP4/WS-FMP4 (H265/H265)播放;
- 支持 WEBRTC(easy支持H264/H265、其他流媒体支持H264)播放;
- 支持 裸流(H264/H265) 播放;
- 支持 直播和点播播放;
- 支持 点播多清晰度播放;
- 支持 全屏或比例显示;
- 支持 电子放大;
- 支持 水印(动态水印、幽灵水印);
- 支持 显示上一个视频最后一帧;
- 支持 播放器快照截图;
- 支持 视频录制(WebM格式(音频+视频)、Mp4格式(视频),Flv格式(音频+视频));
- 支持 超时、断网重连、异常暂停播放等;
- 支持 解析视频i帧文件转base64;
仓库地址
https://github.com/EasyDarwin/EasyPlayer.js
使用方法
我是在vue集成的，在npm上没有找到这个库， 根据官方demo，在index.html里直接引入
，
然后直接在想用的页面使用即可
代码
// 方法 const onUse = (type) => { if (type == "hasAudio") { config.value.hasAudio = !config.value.hasAudio; } else { config.value.MSE = false; config.value.WCS = false; if (type == "MSE") config.value.MSE = true; if (type == "WCS") config.value.WCS = true; } if (isPlay.value) { onDestroy().then(() => { playCreate(); onPlayer(); }); } }; const onPlayer = () => { if (isUnmounted) return; isPlay.value = true; setTimeout( (url) => { if (isUnmounted) return; playerInfo.value && playerInfo.value .play(url) .then(() => {}) .catch((e) => { console.error(e); }); }, 0, videoUrl.value ); }; const onDestroy = () => { return new Promise((resolve, reject) => { if (playerInfo.value) { playerInfo.value.destroy(); playerInfo.value = null; } setTimeout(() => { if (isUnmounted) return; // @ts-ignore resolve(); }, 100); }); }; const playCreate = () => { if (isUnmounted) return; var container = document.getElementById("player_box1"); if (!container) return; // @ts-ignore var easyplayer = new EasyPlayerPro(container, { isLive: config.value.isLive, //默认 true bufferTime: 0.2, // 缓存时长 stretch: false, MSE: config.value.MSE, WCS: config.value.WCS, hasAudio: config.value.hasAudio, watermark: { text: { content: "easyplayer-pro" }, right: 10, top: 10 }, }); easyplayer.on("fullscreen", function (flag) { console.log("is fullscreen", flag); }); easyplayer.on("playbackRate", (rate) => { easyplayer.setRate(rate); }); easyplayer.on("playbackSeek", (data) => { console.log("playbackSeek", data); }); playerInfo.value = easyplayer; };然后组件加载时调用即可。
配置属性：
事件回调
使用方法：
//播放 EasyPlayrPro.on('play', function () { console.log('play'); })
记得文件要放在pubilc文件下 不然打包不进去。
VUE组件版
使用起来更加方便，但是相比于上面那个方式延迟还是高了一些，不知道为什么。有懂得大佬指点一下非常感谢
地址
功能说明
- [x] *支持定制控制器；
- [x] *新增H265视频窗口适配[v1.1.0]；
- [x] 支持 MP4 播放；
- [x] 支持 m3u8/HLS 播放;
- [x] 支持 HTTP-FLV/WS-FLV 播放;
- [x] 支持直播和点播播放;
- [x] 支持播放器快照截图;
- [x] 支持点播多清晰度播放;
- [x] 支持全屏或比例显示;
- [x] 自动检测 IE 浏览器兼容播放;
[x] 支持重连播放；
集成示例
- 使用方式
- [x] vue集成
npm install magic-easyplayer --save - Vue 集成调用
copy node_modules/magic-easyplayer/dist/crossdomain.xml 到 静态文件 根目录
copy node_modules/magic-easyplayer/dist/EasyPlayer-lib.min.js 到 静态文件 根目录
注意： 没有调用会出现无法加载对应插件的报错
在 html 中引用 dist/EasyPlayer-lib.min.js
H.265
copy node_modules/magic-easyplayer/dist/EasyPlayer.wasm 到 静态文件 根目录
具体可以到npm库里去看
