From 8175032b26b8dc0d1361b960247a8bfbaa7ec4e6 Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期一, 16 六月 2025 19:42:50 +0800
Subject: [PATCH] 优化视频播放器逻辑，修复视频关闭时的潜在错误，调整样式以改善用户体验
---
src/view/home/index.vue | 59 +++++++++++++++++++++++++++++++++--------------------------
1 files changed, 33 insertions(+), 26 deletions(-)
diff --git a/src/view/home/index.vue b/src/view/home/index.vue
index 1c0440b..665887b 100644
--- a/src/view/home/index.vue
+++ b/src/view/home/index.vue
@@ -350,7 +350,7 @@
if (this.timer) {
clearInterval(this.timer);
}
- if (this.opencARiD) {
+ if (this.opencARiD && window.hstVideoPlay) {
window.hstVideoPlay.historyCloseVideo(this.opencARiD, '1');
}
if (this.oWebControl != null) {
@@ -557,10 +557,13 @@
this.oWebControl.JS_DestroyWnd();
}
});
- this.map.on("click", (e) => {
+ this.map.on("click", (e) => {
this.infoWindow.close();
if (this.oWebControl != null) {
this.oWebControl.JS_DestroyWnd();
+ }
+ if (this.opencARiD) {
+ window.hstVideoPlay.historyCloseVideo(this.opencARiD, '1');
}
});
this.getMapCarData();
@@ -638,7 +641,7 @@
// 添加点击事件
marker.on("click", async (e) => {
this.showFlv = false
- if (this.opencARiD) {
+ if (this.opencARiD && window.hstVideoPlay) {
window.hstVideoPlay.historyCloseVideo(this.opencARiD, '1');
}
this.opencARiD = item.id;
@@ -715,7 +718,7 @@
}),
]);
- this.initVideoPlayer();
+ this.initVideoPlayer(item.id);
// 更新弹窗内容
@@ -756,7 +759,7 @@
},
// 初始化视频播放器
- initVideoPlayer() {
+ initVideoPlayer(id) {
console.log('11111', this.serverIp, '2222222222', this.serverPort)
// 先销毁之前的播放器
if (this.flvPlayer) {
@@ -774,7 +777,7 @@
// 检查flv.js是否支持
if (flvjs.isSupported()) {
try {
- playDetection(this.carId).then((res) => {
+ playDetection(id || this.carId).then((res) => {
this.flvPlayer = flvjs.createPlayer({
type: "flv", //视频类型
isLive: true, //是否为直播
@@ -811,6 +814,7 @@
}, 5000);
})
.catch((err) => {
+ console.log('error', err);
this.destroyPlayer();
});
// 错误监听
@@ -831,23 +835,26 @@
// 销毁播放器释放资源
if (this.flvPlayer) {
if (this.videoTimer) clearInterval(this.videoTimer);
- closeRealVideo(this.carId).then((res) => {
- this.flvPlayer.pause();
- this.flvPlayer.unload();
- this.flvPlayer.detachMediaElement();
- this.flvPlayer.destroy();
- this.flvPlayer = null;
+ if (this.carId) {
+ closeRealVideo(this.carId).then((res) => {
+ this.flvPlayer.pause();
+ this.flvPlayer.unload();
+ this.flvPlayer.detachMediaElement();
+ this.flvPlayer.destroy();
+ this.flvPlayer = null;
- // 恢复空状态的显示
- const video = document.getElementById("monitoringCard");
- if (video) {
- video.style.display = 'none';
- const emptyElement = video.parentElement.querySelector('.el-empty');
- if (emptyElement) {
- emptyElement.style.display = 'block';
+ // 恢复空状态的显示
+ const video = document.getElementById("monitoringCard");
+ if (video) {
+ video.style.display = 'none';
+ const emptyElement = video.parentElement.querySelector('.el-empty');
+ if (emptyElement) {
+ emptyElement.style.display = 'block';
+ }
}
- }
- });
+ });
+ }
+
}
},
@@ -865,11 +872,11 @@
listRender(record) {
return `<div style="background: #ffffff; padding: 24px 20px;z-index: 999">
- <div style="position: relative; width: 460px; height: 380px">
- <div v-if="${this.showFlv}" style="width: 460px; height: 260px; border-radius: 9px; background: #f5f5f5; display: flex; justify-content: center; align-items: center; flex-direction: column">
+ <div style="position: relative; width: 460px; height: 500px">
+ <div v-if="${this.showFlv}" style="width: 460px; height: 300px; border-radius: 9px; background: #f5f5f5; display: flex; justify-content: center; align-items: center; flex-direction: column">
<video
ref="video"
- style="width: 460px; height: 330px; border-radius: 9px; display: none"
+ style="width: 460px; height: 200px; border-radius: 9px; display: none"
id="monitoringCard"
ref="monitoringCard"
:controls="false"
@@ -878,11 +885,11 @@
</video>
<el-empty description="暂无视频信息" :image-size="80"></el-empty>
</div>
- <div v-else style="position: absolute; left: 0; top: 0;width: 460px; height: 200px;">
+ <div v-else style="position: absolute; left: 0; top: 0;width: 460px; height: 240px;">
<div id="hstplayer" v-if="${!this.IsHai} style="width: 460px; height: 200px;"></div>
<div id="divPlugin" class="divPlugin" style="width: 460px; height: 200px;" ref="divPlugin" v-if="${this.IsHai}"> </div>
</div>
- <div style="display: flex;justify-content: space-between;margin-top: 15px;margin-bottom: 12px;">
+ <div style="display: flex;justify-content: space-between;margin-top: 15px;margin-bottom: 12px;margin-top:100px">
<div style="font-weight: 500;font-size: 18px;color: rgba(0, 0, 0, 0.85);line-height: 25px;">车牌号：${record.vehicleNumber || ""
}</div>
<div style="font-weight: 500; font-size: 18px;color: rgba(0, 0, 0, 0.85);line-height: 25px;">驾驶员：${record.driverName || ""
--
Gitblit v1.7.1