<!-- components/ezuikit-player.vue -->
|
<script lang="ts" setup>
|
defineOptions({
|
name: 'ezuikit-player'
|
});
|
import { EZUIKitPlayer } from "ezuikit-js";
|
import { onMounted, onBeforeUnmount, ref, watch } from "vue";
|
|
interface IPlayer {
|
play: Function;
|
stop: Function;
|
getOSDTime: Function;
|
capturePicture: Function;
|
openSound: Function;
|
closeSound: Function;
|
startSave: Function;
|
stopSave: Function;
|
startTalk: Function;
|
stopTalk: Function;
|
fullscreen: Function;
|
destroy: Function;
|
on: any
|
}
|
|
const props = defineProps<{
|
containerId: string; // 【重要】外部传入唯一DOM ID
|
accessToken: string;
|
url: string;
|
staticPath?: string;
|
}>();
|
|
let player: IPlayer | null = null;
|
|
// 方法暴露给父组件
|
const play = () => {
|
if (player) player.play()
|
};
|
|
const stop = () => {
|
if (player) player.stop();
|
};
|
|
const getOSDTime = () => {
|
if (player)
|
player.getOSDTime().then((data: any) => {
|
console.log("getOSDTime 获取 数据", data);
|
});
|
};
|
|
const capturePicture = () => {
|
if (player)
|
player.capturePicture(`${new Date().getTime()}`).then((data: any) => {
|
console.log("capturePicture 获取 数据", data);
|
});
|
};
|
|
const openSound = () => {
|
if (player) player.openSound();
|
};
|
|
const closeSound = () => {
|
if (player) player.closeSound();
|
};
|
|
const startSave = () => {
|
if (player)
|
player.startSave(`${new Date().getTime()}`).then((data: any) => {
|
console.log("startSave 获取 数据", data);
|
});
|
};
|
|
const stopSave = () => {
|
if (player)
|
player.stopSave().then((data: any) => {
|
console.log("stopSave 获取 数据", data);
|
});
|
};
|
|
const startTalk = () => {
|
if (player) player.startTalk();
|
};
|
|
const stopTalk = () => {
|
if (player) player.stopTalk();
|
};
|
|
const fullscreen = () => {
|
if (player) player.fullscreen();
|
};
|
|
const destroy = async () => {
|
if (player) {
|
try {
|
await player.destroy();
|
} catch (e) {
|
console.warn("播放器销毁异常", e);
|
}
|
player = null;
|
}
|
};
|
|
let playedOnce = false;
|
const init = () => {
|
if (player) {
|
destroy();
|
}
|
if (!props.containerId || !props.url || !props.accessToken) return;
|
|
player = new EZUIKitPlayer({
|
id: props.containerId,
|
accessToken: props.accessToken,
|
url: props.url,
|
autoplay: true,
|
template: "pcLive",
|
height: 360,
|
scaleMode: 1,
|
staticPath: props.staticPath || "",
|
env: {
|
domain: "https://open.ys7.com",
|
},
|
loggerOptions: {
|
level: "INFO",
|
name: "ezuikit",
|
showTime: true,
|
},
|
streamInfoCBType: 1,
|
handleError: (err: any) => {
|
console.error("handleError", err);
|
}
|
});
|
|
player.on(EZUIKitPlayer.EVENTS.firstFrameDisplay, () => {
|
if (playedOnce) return;
|
playedOnce = true;
|
setTimeout(() => {
|
player?.pause();
|
}, 1000);
|
});
|
|
// 事件监听
|
player.on(EZUIKitPlayer.EVENTS.videoInfo, (info: any) => {
|
console.warn("videoInfo", info);
|
});
|
player.on(EZUIKitPlayer.EVENTS.audioInfo, (info: any) => {
|
console.warn("audioInfo", info);
|
});
|
player.on(EZUIKitPlayer.EVENTS.firstFrameDisplay, () => {
|
console.warn("firstFrameDisplay ");
|
});
|
player.on(EZUIKitPlayer.EVENTS.streamInfoCB, (info: any) => {
|
console.warn("streamInfoCB ", info);
|
});
|
};
|
|
// 监听播放地址/token变化，重新初始化
|
watch([() => props.url, () => props.accessToken], () => {
|
init();
|
});
|
|
onMounted(() => {
|
init();
|
});
|
|
// 组件销毁释放播放器资源
|
onBeforeUnmount(() => {
|
destroy();
|
});
|
|
// 对外暴露实例方法
|
defineExpose({
|
play,
|
stop,
|
openSound,
|
closeSound,
|
capturePicture,
|
startSave,
|
stopSave,
|
startTalk,
|
stopTalk,
|
fullscreen,
|
getOSDTime,
|
destroy
|
});
|
</script>
|
|
<template>
|
<div class="ez-player-card">
|
<!-- ID由父组件传入，保证全局唯一 -->
|
<div :id="containerId" style="height: 400px;width:100%"></div>
|
<!--
|
<div class="player-buttons" style="margin-top:8px;display:flex;gap:6px;flex-wrap:wrap">
|
<button @click="init">init</button>
|
<button @click="stop">stop</button>
|
<button @click="play">play</button>
|
<button @click="openSound">开声音</button>
|
<button @click="closeSound">关声音</button>
|
<button @click="capturePicture">截图</button>
|
<button @click="fullscreen">全屏</button>
|
</div>
|
-->
|
</div>
|
</template>
|
|
<style scoped>
|
.ez-player-card {
|
border: 0px solid #e4e7ed;
|
border-radius: 6px;
|
padding: 0px;
|
background: #000;
|
}
|
</style>
|
