easy-player-pro

easy-player-pro

简介

基于EasyPlayer.js的二次封装，增加类型说明，支持在前端工程项目中安装使用。

EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）、WS、WEBRTC、FMP4视频直播与视频点播等多种协议，支持H.264、H.265、AAC、G711A、Mp3等多种音视频编码格式，支持MSE、WASM、WebCodec等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器，使用简单, 功能强大。

快速开始

安装

npm i easy-player-pro
# or
yarn add easy-player-pro

使用

import EasyPlayerPro from "easy-player-pro";
// 初始化
const easyPalyer = new EasyPlayerPro("#palyer-box",{
    isMute:true,
    hasAuto:false
})
// 事件监听
easyPalyer.onPlay=()=>{
    console.log('play event');
}

vite配置

import easyPlayerPro from 'vite-plugin-easy-player-pro'
export default defineConfig({
    plugins:[
        easyPlayerPro()
    ]
})

配置属性 config

参数	说明	类型	默认值
isLive	是否直播	Boolean	true
hasAudio	是否解析音频	Boolean	true
isMute	是否渲染音频	Boolean	false
stretch	视频拉伸	Boolean	false
supportDblclickFullscreen	是否双击全屏	false
poster	视频封面图片	String	-
bufferTime	加载显设置最小缓冲时长，单位秒，播放器会自动消除延迟。	Number	1
loadTimeOut	视频加载超时,单位秒。	Number	10
loadTimeReplay	重连次数 -1为一直加载。	Number	3
MSE	MSE模式	Boolean	true
WCS	WCS模式	Boolean	true
WASM	WASM模式	Boolean	true
WASMSIMD	WASMSIMD模式	Boolean	true
gpuDecoder	硬解码	Boolean	false
webGPU	渲染方式	Boolean	false
canvasRender	渲染容器	Boolean	false
isRtcSRS	SRS类型	Boolean	false
isRtcZLM	ZLM类型	Boolean	false
isFlow	裸流	Boolean	false
watermark	水印	Object	{text: {content:'',color:'',opacity:,fontSize:''},right: 0,top: 0}
fullWatermark	全屏水印	Object	{text: '',angle:'',color:'',fontSize: '',opacity:''}
quality	配置清晰	Array	['普清', '高清', '超清', '4K', '8K']
defaultQuality	默认显示的清晰度，如果不设置，会显示第一个清晰度	String	-
ptzConfig	PTZ配置	Object	{ptz: false, ptzMore: false}
debug	控制台日志打印	Boolean	false
btns	按钮列表	Object	{fullscreen:true,screenshot:true,play:true,audio:true,record:true,stretch:true,zoom:true,ptz:false,quality:false}
注:

1.解码模式 MSE > WCS > wasm(simd适合高分辨率)

事件回调

事件名	说明
onPlay	播放事件
onPause	暂时事件
videoInfo	视频信息
onVideoInfo	音频信息
onFullscreen	全屏
onMute	音频
onKBps	当前网速， 单位KB 每秒1次,
onStretch	切换拉伸
onPTZ	PTZ事件
onScreenshots	截图回调
onContextmenuClose	右击关闭回调
onDecodeHevc	视频编码回调
onLiveEnd	直播结束的事件
onTimeout	加载超时
onRecordEnd	录制结束的事件
onRecordStart	录制开始的事件
onQualityChange	清晰度回调
onPlaybackSeek	录像时间轴跳转回调
onPlaybackRate	录像倍数的回调
onTimestamps	播放时间回调
onError	播放异常
onDblclickPosition	画面双击事件回调

方法

方法名	说明	参数
play	播放	'url'
pause	暂停播放
isPause	返回是否暂停中状态
setMute	音频	true
isMute	返回是否静音
screenshot	获取快照	('test', 'png | jpeg', '0-1(压缩率)','download | base64 | blob')
setFullscreen	全屏(取消全屏)播放视频
exitFullscreen	退出全屏
setQuality	设置分辨率必须是quality里面的数据
setRate	设置录像倍数
seekTime	设置录像跳转时间/s
getVideoInfo	获取视频信息
getAudioInfo	获取音频信息
setMic	设置语音对讲状态(PTZ需开启)	true
destroy	关闭视频，释放底层资源

screenshot 截图，调用后弹出下载框保存截图

filename: 可选参数, 保存的文件名, 默认 时间戳
format : 可选参数, 截图的格式，可选png或jpeg或者webp ,默认 png
quality: 可选参数, 当格式是jpeg或者webp时，压缩质量，取值0 ~ 1 ,默认 0.92
type: 可选参数, 可选download或者base64或者blob，默认download

案例:

const base64 = easyPalyer.screenshot("test", "png", 0.5, 'base64')