初始化项目文件

web_vue/src/pages/files/yl-video.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import router from "@/router/router.js";
+import { useRoute } from "vue-router";
+import YlHlsPlayer from "@/components/yl-hls-player.vue";
+import { useRequest } from "vue-request";
+import { myRequest } from "@/requests/request.ts";
+const route = useRoute();
+const { data: videoCheck, loading } = useRequest(() =>
+  myRequest(`/api_file/file/download-video-check/${route.query.file}`),
+);
+</script>
+
+<template>
+  <el-button link @click="router.push(`/file`)" class="back"
+    ><el-icon><i class="bi-arrow-left-circle" /></el-icon
+    ><span> 返回</span></el-button
+  >
+  <div v-loading="loading" class="video">
+    <YlHlsPlayer
+      v-if="videoCheck.data.video && videoCheck.data.m3u8"
+      :src="`/api/file/download-video/${route.query.file}`"
+    />
+    <video controls v-else style="height: 100%; width: 100%">
+      <source :src="`/api/file/download/${route.query.file}`" />
+    </video>
+  </div>
+</template>
+
+<style scoped>
+.back {
+  margin: 5px 0;
+}
+.video {
+  width: 100%;
+  height: calc(100vh - 140px);
+}
+</style>