From 98f494cf633e3acf5c20f3e9de0d708f2a6c2045 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 05 七月 2024 09:39:59 +0800
Subject: [PATCH] feat:视频浏览
---
src/views/folder/index.vue | 41 +++++++++++++++++++-
public/test.mp4 | 0
src/views/exam-list/index.vue | 10 ++++
src/components/VideoViewer/index.vue | 34 +++++++++++++++-
4 files changed, 79 insertions(+), 6 deletions(-)
diff --git a/public/test.mp4 b/public/test.mp4
new file mode 100644
index 0000000..d3eebb8
--- /dev/null
+++ b/public/test.mp4
Binary files differ
diff --git a/src/components/VideoViewer/index.vue b/src/components/VideoViewer/index.vue
index 18ed0c6..2e1f2ff 100644
--- a/src/components/VideoViewer/index.vue
+++ b/src/components/VideoViewer/index.vue
@@ -1,25 +1,53 @@
<template>
<div class="video-container">
- <div id="player"></div>
+ <div class="video-content">
+ <video :src="props.videoUrl" class="video-player" controls ref="player"></video>
+ </div>
</div>
</template>
<script setup>
-import {ref} from 'vue';
-import Player from 'xgplayer';
+import {ref, onMounted, onBeforeUnmount} from 'vue';
const props = defineProps({
videoUrl: {
type: String,
required: true
+ },
+ poster: {
+ type: String,
+ default: ''
}
});
const player = ref(null);
+onMounted(() => {
+});
+
+onBeforeUnmount(() => {
+ player.value.pause();
+});
+
</script>
<style lang="scss" scoped>
+.video-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: rgba($color: #000000, $alpha: 0.5);
+ .video-content {
+ width: 70%;
+ height: 800px;
+ }
+}
+.video-player {
+ width: 100%;
+ height: 100%;
+}
</style>
\ No newline at end of file
diff --git a/src/views/exam-list/index.vue b/src/views/exam-list/index.vue
index 1fed416..f83cbaa 100644
--- a/src/views/exam-list/index.vue
+++ b/src/views/exam-list/index.vue
@@ -32,7 +32,11 @@
</div>
<div class="card-footer flex justify-center mb-7 shrink-0">
- <el-pagination background layout="prev, pager, next" :total="1000" />
+ <el-pagination background layout="prev, pager, next" :total="dataList.length"
+ :default-page-size="20"
+ :currentPage="currentIndex"
+ :hide-on-single-page="true"
+ @current-change="handleCurrentChange"/>
</div>
</div>
</el-card>
@@ -78,6 +82,10 @@
const handleClick = (tab, event) => {
};
+
+const handleCurrentChange = (val) => {
+ getData();
+}
</script>
<style lang="scss" scoped>
diff --git a/src/views/folder/index.vue b/src/views/folder/index.vue
index 8af363c..1901e4e 100644
--- a/src/views/folder/index.vue
+++ b/src/views/folder/index.vue
@@ -74,8 +74,17 @@
</div>
<!-- 瑙嗛鏌ョ湅 -->
- <div class="video-container">
-
+ <div class="video-container" v-show="videoViewer">
+ <VideoViewer :videoUrl="videoUrl"></VideoViewer>
+ <div class="close-btn">
+ <el-button type="danger" size="large" circle @click="closeViewer">
+ <template #icon>
+ <el-icon :size="20">
+ <Close />
+ </el-icon>
+ </template>
+ </el-button>
+ </div>
</div>
</div>
@@ -90,6 +99,8 @@
import { getFileList } from '@/api/modules/file.js';
import PDFViewer from '@/components/PDFViewer/index.vue';
+import VideoViewer from '@/components/VideoViewer/index.vue';
+
import { useUserStore } from '@/store/index.js';
import useWebScoket from '@/hooks/useWebScoket.js';
@@ -117,6 +128,8 @@
iconPath: '/static/icons/file_type_video.png',
handle: (item) => {
console.log(item);
+ videoViewer.value = true;
+ videoUrl.value = [item.contentUrl.url];
resendMessage();
}
},
@@ -140,6 +153,7 @@
const imageList = ref([]);
const pdfFile = ref('');
+const videoUrl = ref('');
const fileList = ref([]);
@@ -241,4 +255,27 @@
}
}
}
+
+.video-container {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ z-index: 99999;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ .close-btn {
+ position: absolute;
+ top: 60px;
+ right: 100px;
+ z-index: 9999999;
+
+ :deep(.el-button) {
+ width: fit-content;
+ height: fit-content;
+ padding: 10px !important;
+ }
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0