From 8fa3101fbd22813105722563220172066256f009 Mon Sep 17 00:00:00 2001
From: renhao <huxin@123.com>
Date: Fri, 1 Aug 2025 22:52:47 +0800
Subject: [PATCH] =?UTF-8?q?=E7=83=AD=E5=8A=9B=E4=B8=8A=E5=9B=BE=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BDBUG=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/VideoPlay/index copy.vue   |  98 +++++++++++++++
 .../src/components/VideoPlay/index.vue        | 113 ++++++++++++++++++
 2 files changed, 211 insertions(+)
 create mode 100644 Dkl-vue3-ui-DP/src/components/VideoPlay/index copy.vue
 create mode 100644 Dkl-vue3-ui-DP/src/components/VideoPlay/index.vue

diff --git a/Dkl-vue3-ui-DP/src/components/VideoPlay/index copy.vue b/Dkl-vue3-ui-DP/src/components/VideoPlay/index copy.vue
new file mode 100644
index 0000000..70beae3
--- /dev/null
+++ b/Dkl-vue3-ui-DP/src/components/VideoPlay/index copy.vue	
@@ -0,0 +1,98 @@
+<template>
+  <el-dialog
+    class="dialog"
+    v-model="dialogVisible"
+    :title="videoTitle"
+    :width="width"
+    :before-close="handleClose"
+  >
+    <div ref="domRef" class="video"></div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="handleClose">关 闭</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup name="VideoPlay">
+import VideoPlayer from "xgplayer";
+import "xgplayer/dist/index.min.css";
+import {computed, nextTick, onMounted, onUnmounted, ref, watch} from "vue";
+
+const props = defineProps({
+  visible: {
+    required: true,
+    type: Boolean,
+    default: false,
+  },
+  videoTitle: {
+    type: String,
+    default: "视频播放",
+  },
+  url: {
+    required: true,
+    type: String,
+    default: "",
+  },
+  width: {
+    type: String,
+    default: "600px",
+  },
+});
+const emit = defineEmits(["update:visible"]);
+
+// dom ref
+const domRef = ref();
+const player = ref();
+
+// computed
+const dialogVisible = computed(() => props.visible);
+
+// 渲染播放器
+function renderXgPlayer() {
+  if (!domRef.value) return;
+  const url = props.url;
+  player.value = new VideoPlayer({
+    el: domRef.value,
+    url,
+    playbackRate: [0.5, 0.75, 1, 1.5, 2],
+    // 允许自动播放
+    autoplay: true,
+    muted: true,
+    autoplayMuted: true,
+  });
+}
+// 销毁播放器
+function destroyXgPlayer() {
+  player.value?.destroy();
+}
+
+// 关闭弹窗
+function handleClose() {
+  emit("update:visible", false);
+}
+
+// 监听显示与隐藏 控制播放器播放与销毁
+watch(
+  () => dialogVisible.value,
+  (val) => {
+    if (val) {
+      nextTick(() => {
+        renderXgPlayer();
+      });
+    } else {
+      destroyXgPlayer();
+    }
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+.dialog {
+  box-sizing: border-box;
+  .video {
+    width: 100% !important;
+  }
+}
+</style>
diff --git a/Dkl-vue3-ui-DP/src/components/VideoPlay/index.vue b/Dkl-vue3-ui-DP/src/components/VideoPlay/index.vue
new file mode 100644
index 0000000..f181622
--- /dev/null
+++ b/Dkl-vue3-ui-DP/src/components/VideoPlay/index.vue
@@ -0,0 +1,113 @@
+<template>
+  <!-- <el-dialog
+    class="dialog"
+    v-model="dialogVisible"
+    :title="videoTitle"
+    :width="width"
+    :before-close="handleClose"
+  > -->
+    <div ref="domRef" class="video" v-if="dialogVisible"></div>
+    <!-- <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="handleClose">关 闭</el-button>
+      </span>
+    </template>
+  </el-dialog> -->
+</template>
+
+<script setup name="VideoPlay">
+import VideoPlayer from "xgplayer";
+import "xgplayer/dist/index.min.css";
+import {computed, nextTick, onMounted, onUnmounted, ref, watch} from "vue";
+
+const props = defineProps({
+  visible: {
+    required: true,
+    type: Boolean,
+    default: false,
+  },
+  videoTitle: {
+    type: String,
+    default: "视频播放",
+  },
+  url: {
+    required: true,
+    type: String,
+    
+  },
+  width: {
+    type: String,
+    default: "600px",
+  },
+  autoplay: {
+    type: Boolean,
+    default: true,
+  },
+  loop: {
+    type: Boolean,
+    default: true,
+  },
+});
+const emit = defineEmits(["update:visible"]);
+
+// dom ref
+const domRef = ref();
+const player = ref();
+
+// computed
+const dialogVisible = computed(() => props.visible);
+
+// 渲染播放器
+function renderXgPlayer() {
+  if (!domRef.value) return;
+  const url = props.url;
+  player.value = new VideoPlayer({
+    el: domRef.value,
+    url,
+    playbackRate: [0.5, 0.75, 1, 1.5, 2],
+    // 允许自动播放
+    loop:props.loop,
+    autoplay: props.autoplay,
+    muted: props.autoplay,
+    autoplayMuted: props.autoplay,
+  });
+}
+// 销毁播放器
+function destroyXgPlayer() {
+  player.value?.destroy();
+}
+
+// 关闭弹窗
+function handleClose() {
+  emit("update:visible", false);
+}
+
+// 监听显示与隐藏 控制播放器播放与销毁
+watch(
+  () => dialogVisible.value,
+  (val) => {
+    if (val) {
+      nextTick(() => {
+        renderXgPlayer();
+      });
+    } else {
+      destroyXgPlayer();
+    }
+  }
+);
+
+onMounted(() => {
+  renderXgPlayer();
+});
+</script>
+
+<style lang="scss" scoped>
+.video {
+  width: 100% !important;
+  height: 100% !important;
+  &:deep(.xgplayer-start) {
+    width: 50px;
+    height: 50px;
+  }
+}
+</style>