feat(ruoyi-ui): 添加新视频播放器并集成 DPlayer

- 在 router 中引入 OldVideoPlayer 组件
- 在 package.json 中添加 dplayer 依赖
- 新增 VidepPlayer.vue 组件，实现双视频播放功能
- 使用 DPlayer 库进行视频播放，支持截图功能
- 优化视频播放页面布局和样式

ruoyi-ui/package.json

@@ -40,6 +40,7 @@
     "axios": "0.28.1",
     "clipboard": "2.0.8",
     "core-js": "3.37.1",
+    "dplayer": "^1.27.1",
     "echarts": "5.4.0",
     "element-ui": "2.15.14",
     "file-saver": "2.0.5",

ruoyi-ui/src/router/index.js

@@ -7,7 +7,7 @@ Vue.use(Router)
 /* Layout */
 import Layout from '@/layout'
 import VideoPlayer from "@/views/record/recordInspectionCabinet/VideoPlayer.vue";
-
+import OldVideoPlayer from "@/views/record/recordInspectionCabinet/OldVideoPlayer.vue";
 /**
  * Note: 路由配置项
  *

ruoyi-ui/src/views/record/recordInspectionCabinet/VidepPlayer.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="video-container">
+    <h1>视频播放页面</h1>
+    <div ref="thermalPlayerContainer" class="player-container"></div>
+    <div ref="visiblePlayerContainer" class="player-container"></div>
+  </div>
+</template>
+
+<script>
+import DPlayer from 'dplayer';
+
+export default {
+  data() {
+    return {
+      thermalVideoUrl: '',
+      visibleVideoUrl: '',
+      thermalPlayer: null,
+      visiblePlayer: null
+    };
+  },
+  mounted() {
+    this.loadVideoPaths();
+  },
+  methods: {
+    async loadVideoPaths() {
+      const filePath = this.$route.query.filePath;
+      try {
+        // TODO: 修改为实际接口地址
+        const thermalResponse = `/dev-api/record/recordInspectionCabinet/getThermalVideo/${filePath}`;
+        this.thermalVideoUrl = thermalResponse;
+        const visibleResponse = `/dev-api/record/recordInspectionCabinet/getVisibleVideo/${filePath}`;
+        this.visibleVideoUrl = visibleResponse;
+
+        this.playVideo();
+      } catch (error) {
+        console.log(error);
+      }
+    },
+
+    playVideo() {
+      if (this.thermalPlayer) {
+        this.thermalPlayer.destroy();
+      }
+      if (this.visiblePlayer) {
+        this.visiblePlayer.destroy();
+      }
+
+      this.thermalPlayer = new DPlayer({
+        container: this.$refs.thermalPlayerContainer,
+        screenshot: true,
+        video: {
+          url: this.thermalVideoUrl,
+          type: 'auto'
+        }
+      });
+
+      this.visiblePlayer = new DPlayer({
+        container: this.$refs.visiblePlayerContainer,
+        screenshot: true,
+        video: {
+          url: this.visibleVideoUrl,
+          type: 'auto'
+        }
+      });
+    }
+  },
+
+  beforeDestroy() {
+    if (this.thermalPlayer) {
+      this.thermalPlayer.destroy();
+    }
+    if (this.visiblePlayer) {
+      this.visiblePlayer.destroy();
+    }
+  }
+};
+
+</script>
+
+<style scoped>
+.video-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh; /* 使容器至少与视口一样高 */
+}
+
+.player-container {
+  width: 100%; /* 或者你可以设置一个固定宽度 */
+  max-width: 640px; /* 限制最大宽度 */
+  margin: 10px 0;
+  aspect-ratio: 16 / 9; /* 设置宽高比为16:9 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: black; /* 背景色，可根据需要调整 */
+}
+</style>