背調

查詢官方文檔，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>