添加视频删除功能，修改视频播放功能

src/api/video.js

@@ -15,6 +15,14 @@ export const delayVideoService = (data) => {
     return request2.post('/video/delay', params, { headers : {'token': data.token }});
 }
 
+export const deleteVideoService = (data) => {
+    const params = new URLSearchParams();
+    for (let key in data) {
+        params.append(key, data[key])
+    }
+    return request2.post('/video/delete', params, { headers : {'token': data.token }});
+}
+
 export const quashVideoService = (data) => {
     const params = new URLSearchParams();
     for (let key in data) {

src/main.js

@@ -7,9 +7,11 @@ import App from './App.vue'
 import router from '@/router'
 import globalData  from '@/utils/global.js'
 import Menu from '@/views/Menu.vue'
+// import VideoPlayer from '@/views/Video.vue'
 
 const app=createApp(App);
 app.component('Menu',Menu);
+// app.component('VideoPlayer',VideoPlayer);
 app.provide('globalData',globalData);
 
 app.use(router).use(ElementPlus).mount('#app');

src/views/CIDList.vue

@@ -331,7 +331,7 @@ export default {
                   </el-form-item>
                   <el-form-item label="外部回调Token" prop="device_status">
                     <el-input v-model="updateForm.cidtoken" style="width: 600px" />
-                    回调地址：https://gep.ljsea.xyz/cid/callback?token={{updateForm.cidtoken}}&id={{updateForm.id}}
+                    回调地址：https://{{tokenData.server}}/cid/callback?token={{updateForm.cidtoken}}&id={{updateForm.id}}
                   </el-form-item>
 
                   <el-form-item label="定时执行时间" prop="time">

src/views/Video.vue

@@ -18,6 +18,7 @@ const videoPlayer = ref(null);
 const myPlayer = ref(null);
 const route = useRoute();
 const router = useRouter();
+console.log("video player")
 if(localStorage.getItem('token')===null) {
       router.push("/login");
     }
@@ -60,8 +61,8 @@ onUnmounted(() => {
 </script>
 <style lang="scss" scoped>
 .video_wrap {
-  width: 100vw;
+  width: 50vw;
-  height: 100vh;
+  height: 60vh;
   position: relative;
 
   .backIndex {

src/views/VideoList.vue

@@ -1,19 +1,30 @@
 <script>
 import axios from "axios";
-import { getVideoListService, quashVideoService } from "@/api/video.js";
+import {
+  getVideoListService,
+  quashVideoService,
+  deleteVideoService,
+} from "@/api/video.js";
 import { delayVideoService } from "@/api/video.js";
 import router from "@/router/index.js";
 import Cookies from "js-cookie";
-import { ElMessage } from 'element-plus';  
+import { ElMessage } from "element-plus";
 import Menu from "@/views/Menu.vue";
+import VideoPlayer from "@/views/Video.vue";
 
 export default {
+  components: {
+    VideoPlayer,
+  },
   data() {
     return {
       ip: "",
       tableData: [],
       file_sum_size: 0,
+      dialogVisible: false,
+      playing_video : "",
       tokenData: {
+        id: -1,
         token: localStorage.getItem("token"),
         ip: localStorage.getItem("ip"),
         userId: localStorage.getItem("userId"),
@@ -45,11 +56,11 @@ export default {
         console.log(e);
       }
       let data = result.data;
-      let len = data?data.length:0;
+      let len = data ? data.length : 0;
 
       for (let i = 0; i < len; i++) {
         //this.file_sum_size += parseFloat(data[i].file_size);
-        data[i].FileSize = parseFloat(data[i].FileSize/ 1024 / 1024).toFixed(
+        data[i].FileSize = parseFloat(data[i].FileSize / 1024 / 1024).toFixed(
           2
         );
       }
@@ -66,13 +77,13 @@ export default {
     },
     async quashOption() {
       // 撤销操作
-      let result=await quashVideoService(this.tokenData);
+      let result = await quashVideoService(this.tokenData);
       if (result.code == 0) {
         //alert(result.message);
-        ElMessage.success("操作成功！"+result.message);
+        ElMessage.success("操作成功！");
         this.getVideoList();
       } else {
-        alert("操作失败");
+        ElMessage.error("操作失败！");
       }
     },
     onSubmit() {
@@ -85,12 +96,37 @@ export default {
       alert("页码发生变化" + val);
     },
     playVideo(index) {
+      this.dialogVisible = true;
+      // localStorage.setItem("is_to_play", "1");
       var id = this.tableData[index].ID;
       var name = this.tableData[index].VideoName;
       localStorage.setItem("video_id", id);
       localStorage.setItem("video_name", name);
-      //alert("id=" + id + " name=" + name);
+      this.playing_video = "id: " + id + " ; name: " + name;
-      router.push("/video");
+      components.updated();
+      // //alert("id=" + id + " name=" + name);
+       //router.push("/video");
+    },
+    async deleteVideo(index) {
+      //判断是否删除
+      if (!confirm("是否删除？")) {
+        return;
+      }
+      var id = this.tableData[index].ID;
+      let req = {
+        id: id,
+        userId: this.tokenData.userId,
+        token: this.tokenData.token,
+        type: "del_with_logic",
+      };
+      let result = await deleteVideoService(req);
+      if (result.code == 0) {
+        //alert(result.message);
+        ElMessage.success("操作成功！");
+        this.getVideoList();
+      } else {
+        ElMessage.error("操作失败!");
+      }
     },
     async downloadVideo(index) {
       var id = this.tableData[index].ID;
@@ -136,7 +172,7 @@ export default {
         URL.revokeObjectURL(videoUrl);
       } catch (error) {
         console.error("下载视频时发生错误:", error);
-        ElMessage.error("下载视频时发生错误")
+        ElMessage.error("下载视频时发生错误");
       }
     },
     async delayVideo(index) {
@@ -222,7 +258,6 @@ export default {
     //   console.log("entrydate:",Cookies.get("entrydate"));
     //   this.tokenData.entrydate = [Object(Cookies.get("entrydate")[0]),Object(Cookies.get("entrydate")[1])];
     // }
-
     this.getVideoList();
   },
 };
@@ -279,6 +314,13 @@ export default {
             </el-select>
 
             <el-form-item>
+              指定视频ID:
+              <el-col :span="8">
+                <el-input
+                  placeholder="指定视频ID"
+                  v-model="tokenData.id"
+                ></el-input>
+              </el-col>
               <el-button type="primary" @click="getVideoList()">查询</el-button>
             </el-form-item>
             <el-form-item>
@@ -299,6 +341,20 @@ export default {
             </el-form-item> -->
           </el-form>
 
+
+          <el-dialog
+            title="视频播放"
+            v-model="dialogVisible"
+            width="60%"
+            height="60%"
+            center
+          >
+          <div>
+            视频播放({{playing_video }})：
+            <VideoPlayer v-if="dialogVisible"></VideoPlayer>
+          </div>
+          </el-dialog>
+
           <!-- 表格  :row-style="this.tableRowClassName"-->
           <el-table :data="tableData" width="100%" border>
             :row-style="this.tableRowClassName"
@@ -316,17 +372,17 @@ export default {
             <el-table-column
               prop="CreateTime"
               label="开始时间"
-              width="180"
+              width="160"
             ></el-table-column>
             <el-table-column
               prop="EndTime"
               label="结束时间"
-              width="180"
+              width="160"
             ></el-table-column>
             <el-table-column
               prop="DeleteTime"
               label="预期删除时间"
-              width="180"
+              width="160"
             ></el-table-column>
             <el-table-column
               prop="FileSize"
@@ -338,7 +394,7 @@ export default {
               label="摄像头"
               width="50"
             ></el-table-column>
-            <el-table-column label="操作" width="300">
+            <el-table-column label="操作" width="330">
               <template #default="scope">
                 <el-button
                   type="primary"
@@ -358,6 +414,12 @@ export default {
                   @click.prevent="downloadVideo(scope.$index)"
                   >下载</el-button
                 >
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="deleteVideo(scope.$index)"
+                  >删除</el-button
+                >
 
                 <!-- <el-button type="danger" size="mini">删除</el-button> -->
               </template>

src/views/VideoPlayer.vue

@@ -1,36 +1,113 @@
 <template>
-    <div>
+  <div class="video_wrap">
-      <video ref="videoPlayer" class="video-js"></video>
+    <video
+      width="100%"
+      height="100%"
+      ref="videoPlayer"
+      muted="muted"
+      class="video-js video"
+    ></video>
   </div>
-  </template>
+</template>
 
-  <script>
+<script setup>
-  import videojs from 'video.js';
+import { onUnmounted, ref, nextTick } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import videojs from "video.js";
+import "video.js/dist/video-js.css";
 
-  export default {
+const videoPlayer = ref(null);
-    name: 'VideoPlayer',
+const myPlayer = ref(null);
-    props: {
+
-      options: {
+export default {
-        type: Object,
+  name: "VideoPlayer",
-        default() {
+  props: {},
-          return {};
-        }
-      }
-    },
   data() {
-      return {
+  },
-        player: null
+  methods: {
+    playVideoA(){
+      nextTick(() => {
+          myPlayer.value = videojs(videoPlayer.value, {
+            // poster: "//vjs.zencdn.net/v/oceans.png",//视频封面照片
+            controls: true, //视频控件
+            autoplay: true, //自动播放
+            sources: [
+              {
+                src:
+                  "https://gep.ljsea.top/video/mp4?filename=" +
+                  localStorage.getItem("video_name") +
+                  "&id=" +
+                  localStorage.getItem("video_id") +
+                  "&ip=" +
+                  localStorage.getItem("ip")+
+                  "&userId=" +
+                  localStorage.getItem("userId") +
+                  "&token=" +
+                  localStorage.getItem("token"), //视频地址
+                type: localStorage.getItem("video_name").split('.')[1]==="m3u8" ?"application/vnd.apple.mpegurl":"video/mp4",
+              },
+            ],
+            controlBar: {
+              remainingTimeDisplay: {
+                displayNegative: false,
               }
             },
-    mounted() {
+            playbackRates: [0.5, 1, 1.5, 2], //设置播放速度
-      this.player = videojs(this.$refs.videoPlayer, this.options, () => {
-        this.player.log('onPlayerReady', this);
           });
+        });
+    }
   },
-    beforeDestroy() {
+  onMounted(){
-      if (this.player) {
+    this.playVideoA();
-        this.player.dispose();
+  },
+  onUnmounted(){
+    if (myPlayer.value) {
+        myPlayer.value.dispose();
       }
   }
+}
+
+// export default VideoPlayer;
+</script>
+
+<style lang="scss" scoped>
+.video_wrap {
+  width: "80%";
+  height: "80%";
+  position: relative;
+
+  .backIndex {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 50px;
+    width: 100%;
+    line-height: 50px;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 99;
+    padding-left: 10px;
+    font-size: 20px;
+    font-weight: 400;
+    opacity: 0;
+    transition: all 0.3s;
+    color: white;
+
+    &:hover {
+      opacity: 1;
     }
-  </script>
+    span {
+      cursor: pointer;
+    }
+  }
+
+  .video {
+    height: 100%;
+    width: 100%;
+  }
+
+  ::v-deep(.vjs-big-play-button) {
+    margin-left: 45%;
+    margin-top: 20%;
+  }
+}
+</style>