56 lines
1.6 KiB
Vue
56 lines
1.6 KiB
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>
|