38 lines
1.0 KiB
Vue
38 lines
1.0 KiB
Vue
<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>
|