优化状态

董国庆

2025-04-23 8d36c4a0a349f613cb11236fd301484a01e041ad

优化状态

 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;