From 8d36c4a0a349f613cb11236fd301484a01e041ad Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期三, 23 四月 2025 09:25:44 +0800
Subject: [PATCH] 优化状态
---
src/view/home/index.vue | 42 +++++++++++++++++++++++++++++++-----------
1 files changed, 31 insertions(+), 11 deletions(-)
diff --git a/src/view/home/index.vue b/src/view/home/index.vue
index ddefce6..b9c4e4c 100644
--- a/src/view/home/index.vue
+++ b/src/view/home/index.vue
@@ -624,7 +624,7 @@
},
// 初始化视频播放器
- initVideoPlayer(videoUrl) {
+ initVideoPlayer() {
console.log('11111',this.serverIp,'2222222222',this.serverPort)
// 先销毁之前的播放器
if (this.flvPlayer) {
@@ -654,7 +654,7 @@
enableStashBuffer: false, // 启用数据缓存机制，提高视频的流畅度和稳定性。
stashInitialSize: 1024, // 初始缓存大小。单位：字节。建议针对直播：调整为1024kb
stashInitialTime: 0.2, // 缓存初始时间。单位：秒。建议针对直播：调整为200毫秒
- seekType: "range", // 建议将其设置为“range”模式，以便更快地加载视频数据，提高视频的实时性。
+ seekType: "range", // 建议将其设置为"range"模式，以便更快地加载视频数据，提高视频的实时性。
lazyLoad: false, //关闭懒加载模式，从而提高视频的实时性。建议针对直播：调整为false
lazyLoadMaxDuration: 0.2, // 懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒
deferLoadAfterSourceOpen: false, // 不预先加载视频数据，在 MSE（Media Source Extensions）打开后立即加载数据，提高视频的实时性。建议针对直播：调整为false
@@ -665,6 +665,14 @@
this.flvPlayer
.play()
.then((res) => {
+ // 显示视频元素
+ video.style.display = 'block';
+ // 隐藏空状态
+ const emptyElement = video.parentElement.querySelector('.el-empty');
+ if (emptyElement) {
+ emptyElement.style.display = 'none';
+ }
+
this.videoTimer = setInterval(() => {
playDetection(this.carId);
}, 5000);
@@ -695,6 +703,16 @@
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';
+ }
+ }
});
}
},
@@ -714,16 +732,18 @@
listRender(record) {
return `<div style="background: #ffffff; padding: 24px 20px;z-index: 999">
<div style="position: relative; width: 460px; height: 330px">
-
- <video
+ <div style="width: 460px; height: 330px; 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"
- id="monitoringCard"
- ref="monitoringCard"
- :controls="false"
- autoPlay
- width="620">
- </video>
+ style="width: 460px; height: 330px; border-radius: 9px; display: none"
+ id="monitoringCard"
+ ref="monitoringCard"
+ :controls="false"
+ autoPlay
+ width="620">
+ </video>
+ <el-empty description="暂无视频信息" :image-size="80"></el-empty>
+ </div>
<canvas id="myCanvas" style="display:none"></canvas>
<div style="position: absolute; right: 11px; top: 10px">
<div style="display: flex;flex-direction: column;align-items: center;justify-content: center;
--
Gitblit v1.7.1