sx_yjb_vue/src/components/video/index.vue

<template>
  <el-dialog v-model="visible" title="视频" :append-to-body="appendToBody">
    <!-- 原生video标签，支持大部分基础格式（如MP4） -->
    <video controls :src="fnSrc(src)" autoplay></video>
  </el-dialog>
</template>

<script setup>
import { useVModel } from "@vueuse/core";
import { watchEffect } from "vue";

const VITE_FILE_URL = import.meta.env.VITE_FILE_URL;
const props = defineProps({
  src: { type: String, default: "" },
  visible: { type: Boolean, required: true, default: false },
  appendToBody: { type: Boolean, default: false },
  autoplay: { type: Boolean, default: true },
});
const emits = defineEmits(["update:visible"]);
const visible = useVModel(props, "visible", emits);

const fnSrc = (src) => {
  if (!src) return;
  if (src.includes("http") || src.includes("https")) return src;
  return VITE_FILE_URL + src;
};

watchEffect(() => {
  const video = document.querySelector("video");
  if (visible.value && video) {
    video.play().catch((err) => console.error("自动播放失败:", err));
  } else if (video) {
    video.pause();
  }
});
</script>