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 getEnvVar = (name) => {
  try {
    // 优先尝试 Vite 的环境变量
    if (typeof import !== 'undefined' && import.meta && import.meta.env) {
      return import.meta.env[name];
    }
    // 回退到 process.env
    if (typeof process !== 'undefined' && process.env) {
      return process.env[name];
    }
    return "";
  } catch (error) {
    console.warn(`获取环境变量 ${name} 时出错:`, error);
    return "";
  }
};

const VITE_FILE_URL = getEnvVar('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>