优化视频播放器逻辑，修复视频关闭时的潜在错误，调整样式以改善用户体验

hejianhao

2025-06-16 8175032b26b8dc0d1361b960247a8bfbaa7ec4e6

优化视频播放器逻辑，修复视频关闭时的潜在错误，调整样式以改善用户体验

 src/view/early-warning/index.vue

@@ -41,7 +41,7 @@
                            <el-option label="将来处理" value="将来处理"></el-option>

                        </el-select>

                    </el-form-item>

                    <el-tabs  v-model="activeName" type="card" @tab-click="handleClick"

                    <el-tabs v-model="activeName" type="card" @tab-click="handleClick"

                        style="margin-left: 30px;border: none;">

                        <el-tab-pane v-for="(item, index) in options" :key="index" :label="item.name"

                            :name="item.name"></el-tab-pane>

@@ -219,6 +219,7 @@
import { getCarType } from '../car-manage/service'

import moment from 'moment'

import { exportExcell } from '@/utils/utils.js'

import { number } from "echarts";



export default {

    data() {

@@ -262,7 +263,7 @@
        this.fetchData()

        getCarType().then(res => {

            let arr = [{ name: '全部' }]

            this.options = [ ...res,...arr,];

            this.options = [...res, ...arr,];

        });

        const query = this.$route.query;

        if (query && Object.keys(query).length > 0) {

@@ -303,7 +304,8 @@
            this.totalAll = res.total || 0

            this.processed = res.processed || 0

            this.unprocessed = res.unprocessed || 0

            this.progress = res.processed / this.totalAll * 100 //占比

            this.progress = res.processed / this.totalAll * 100 || 0//占比

            this.progress = this.progress.toFixed(2) * 1

            this.list = res.page.records

            this.total = res.page.total

            this.listLoading = false

@@ -385,6 +387,7 @@
::v-deep .el-tabs--card>.el-tabs__header {

    border: none !important;

}



.color1 {

    color: #0E6EFD;

}


 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 || ""