背调

查询官方文档，EasyPlayer-pro支持ws-flv, http-flv, hls, webrtc（webrtc://xxx）格式，电子放大、水印(动态水印、幽灵水印)、显示上一个视频最后一帧、播放器快照截图、视频录制(WebM格式(音频+视频)、MP4格式(视频),FLV格式(音频+视频))、超时、断网重连、异常暂停播放等

属性配置 

属性	说明	类型	默认值
container	播放器容器	-	-
decoder	wasm解码地址	String	-
isResize	是否拉伸	Boolean	true
loadingText	加载显示的文字	String	加载中
videoBuffer	设置最小缓冲时长，单位秒，播放器会自动消除延迟	Number	1
hasAudio	是否解析音频	Boolean	true
useMSE	MSE模式	Boolean	false
useWCS	WCS模式	Boolean	false
useSIMD	强制使用wasm模式	Boolean	false
background	视频封面图片	String	-
qualityConfig	配置清晰度	Array	['普清', '高清', '超清', '4K', '8K']
defaultStreamQuality	默认显示的清晰度，如果不设置，会显示第一个清晰度	String	-
isNotMute	是否渲染音频	Boolean	false
recordType	视频录制默认mp4格式	String	mp4, flv
playbackForwardMaxRateDecodeIFrame	录像倍数	Number	-
debug	控制台日志打印	Boolean	false
debugLevel	打印日志级别默认warn	String	debug, warn

调用方法和事件回调

方法/事件	说明
play	播放
playback	播放录像
pause	暂停播放
isPause	返回是否暂停中状态
setBufferTime	设置最大缓冲时长
setVolume	设置音量
getVolume	获取音量
exitFullscreen	退出全屏(取消全屏)播放视频
mute	静音
cancelMute	取消静音
isMute	返回是否静音
screenshot	获取快照
setFullscreen	全屏
setStreamQuality	设置分辨率，必须是qualityConfig里面的数据
forward	设置录像倍数
setPlaybackStartTime	设置录像跳转时间/s
getVideoInfo	获取视频信息
getAudioInfo	获取音频信息
destroy	关闭视频，释放底层资源
play	播放事件
pause	暂停事件
videoInfo	视频信息
audioInfo	音频信息
mute	音频事件
error	播放异常
kBps	当前网速，单位KB 每秒1次
recordEnd	录制结束的事件
recordStart	录制开始的事件
fullscreen	当前是否全屏
streamQualityChange	清晰度回调
playbackSeek	录像时间轴跳转回调
playbackPreRateChange	录像倍数的回调
currentPts	监听当前渲染帧的时间戳（流里面的）

应用

npm install easyplayerpro

import { createApp } from 'vue';
import App from './App.vue';
import EasyPlayerPro from 'easyplayerpro';const app = createApp(App);// 将 EasyPlayerPro 挂载到全局属性
app.config.globalProperties.$EasyPlayerPro = EasyPlayerPro;app.mount('#app');

<template><div class="container"><div class="row"><div class="col-md-8"><!-- 播放器容器 --><div ref="videoContainer" id="video" class="player-container"></div></div><div class="col-md-4"><!-- 配置选项 --><div class="config-options"><label><input type="checkbox" v-model="config.useMSE" /> MSE 硬解</label><label><input type="checkbox" v-model="config.useSIMD" /> WASM 解码</label><label><input type="checkbox" v-model="config.hasAudio" /> 渲染音频</label><label><input type="checkbox" v-model="config.websocket1006ErrorReplay" /> 自动重连</label><label>延迟重播时间：<input type="number" v-model.number="config.reconnectTime" /> ms</label><label>水印配置：<input type="text" v-model="config.watermark.text" /></label><label>视频封面 URL：<input type="text" v-model="config.poster" /></label><label>播放地址：<input type="text" v-model="config.url" id="playHref" /></label></div><!-- 控制按钮 --><div class="control-buttons"><button id="play" @click="createPlayer">播放</button><button id="rePlay" @click="rePlay">重播</button><button id="destroy" @click="destroyPlayer">销毁</button><button @click="screenshotFn">截图</button></div></div></div></div>
</template><script setup>
import { reactive, onMounted, ref } from 'vue';// 获取全局属性
const { proxy } = getCurrentInstance();// 初始化播放器配置
const config = reactive({useMSE: false,useSIMD: false,hasAudio: false,websocket1006ErrorReplay: false,reconnectTime: 5000, // 5秒重连watermark: {text: ''},poster: '',url: 'http://192.168.1.37:8888/live/001.live.flv'
});// 声明
let easypro;
const videoContainer = ref(null);
const playHref = ref(null);// 实例初始化
function createPlayer () {if (easypro) {easypro.destroy(); // 销毁存在的实例console.log('Existing player destroyed');}easypro = new proxy.$EasyPlayerPro({container: videoContainer.value,videoBuffer: 0.2,videoBufferDelay: config.videoBufferDelay || 0, // 使用 config 中的值useMSE: config.useMSE,useSIMD: config.useSIMD,hasAudio: config.hasAudio,websocket1006ErrorReplay: config.websocket1006ErrorReplay,reconnectTime: config.reconnectTime,networkDelayTimeoutReplay: false,heartTimeout: 10000,replayUseLastFrameShow: false,background: config.background || '',timeout: 10,qualityConfig: ['普清', '高清', '超清', '4K', '8K'],debug: true,debugLevel: "debug",operateBtns: {fullscreen: true,screenshot: true,play: true,},});const url = config.url;if (url) {easypro.play(url);console.log(`Playing video from: ${url}`);} else {console.warn('No video URL provided!');}
}// 重播
function rePlay () {if (easypro) {easypro.play(config.url);console.log('Replaying the video');} else {createPlayer();}
}// 销毁
function destroyPlayer () {if (easypro) {easypro.destroy();console.log('Player destroyed');}
}// 截图
function screenshotFn () {if (easypro) {easypro.screenshot();console.log('Screenshot taken');} else {console.warn('No player instance found to take a screenshot');}
}onMounted(() => {playHref.value = document.getElementById('playHref');
});
</script><style scoped>
.player-container {width: 100%;height: 500px;background-color: #000;
}.config-options label {display: block;margin-bottom: 8px;
}.control-buttons button {margin-right: 10px;
}
</style>