70 lines
1.6 KiB
Vue
70 lines
1.6 KiB
Vue
|
<script setup>
|
|||
|
|
import { onMounted, onBeforeUnmount, watch } from "vue";
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
videoUrl: String
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const playerContainer = ref(null);
|
|||
|
|
const player = ref(null);
|
|||
|
|
|
|||
|
|
const initPlayer = () => {
|
|||
|
|
if (!props.videoUrl || !playerContainer.value) return;
|
|||
|
|
|
|||
|
|
// 彻底清理旧实例（关键修改）
|
|||
|
|
if (player.value) {
|
|||
|
|
player.value.JS_StopRealPlayAll();
|
|||
|
|
player.value.JS_Destroy();
|
|||
|
|
playerContainer.value.innerHTML = ""; // 清空容器
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重新创建容器（避免残留元素）
|
|||
|
|
const container = document.createElement("div");
|
|||
|
|
container.id = "player-container";
|
|||
|
|
container.style.width = "100%";
|
|||
|
|
container.style.height = "100%";
|
|||
|
|
playerContainer.value.appendChild(container);
|
|||
|
|
|
|||
|
|
// 初始化新实例
|
|||
|
|
player.value = new JSPlugin({
|
|||
|
|
szId: "player-container", // 必须与创建的容器ID一致
|
|||
|
|
szBasePath: "js/",
|
|||
|
|
openDebug: true,
|
|||
|
|
supportGMProtocol: true, // 启用国密协议支持
|
|||
|
|
iWidth:"100%",
|
|||
|
|
iHeight:"100%",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
player.value.JS_Play(props.videoUrl, {
|
|||
|
|
onError: (err) => console.error("播放失败:", err)
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 监听URL变化
|
|||
|
|
watch(() => props.videoUrl, initPlayer);
|
|||
|
|
|
|||
|
|
onMounted(initPlayer);
|
|||
|
|
|
|||
|
|
onBeforeUnmount(() => {
|
|||
|
|
if (player.value) {
|
|||
|
|
player.value.JS_StopRealPlayAll();
|
|||
|
|
player.value.JS_Destroy();
|
|||
|
|
}
|
|||
|
|
if (playerContainer.value) {
|
|||
|
|
playerContainer.value.innerHTML = ""; // 确保清理
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<!-- 固定结构，不设ID -->
|
|||
|
|
<div ref="playerContainer" class="video-monitor-container"></div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.video-monitor-container {
|
|||
|
|
width: 95%;
|
|||
|
|
height: 100%;
|
|||
|
|
min-height: 500px; /* 防止折叠 */
|
|||
|
|
}
|
|||
|
|
</style>
|