资源管理

frontend/src/views/resourceManage/components/resourcePlayerDialog.vue

@@ -0,0 +1,42 @@
+<template>
+    <el-dialog v-model="dialogVisible" title="播放视频" width="820px" :destroy-on-close="true" @closed="clearVideo">
+        <video ref="videoRef" class="resource-player" :src="videoUrl" controls autoplay />
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref } from 'vue'
+
+const dialogVisible = ref(false)
+const videoUrl = ref('')
+const videoRef = ref<HTMLVideoElement>()
+
+const open = async (url: string) => {
+    videoUrl.value = url
+    dialogVisible.value = true
+    await nextTick()
+    videoRef.value?.load()
+}
+
+const clearVideo = () => {
+    if (videoRef.value) {
+        videoRef.value.pause()
+        videoRef.value.removeAttribute('src')
+        videoRef.value.load()
+    }
+    videoUrl.value = ''
+}
+
+defineExpose({
+    open
+})
+</script>
+
+<style scoped lang="scss">
+.resource-player {
+    display: block;
+    width: 100%;
+    max-height: 68vh;
+    background: #000;
+}
+</style>