83 lines
1.6 KiB
Vue
83 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<el-dialog v-model="visible" title="视频" :append-to-body="appendToBody">
|
||
|
|
<ali-player
|
||
|
|
ref="playerRef"
|
||
|
|
:source="fnSrc(src)"
|
||
|
|
:vid="vid"
|
||
|
|
:play-auth="playAuth"
|
||
|
|
:visible="visible"
|
||
|
|
:cover="cover"
|
||
|
|
:autoplay="autoplay"
|
||
|
|
:show-progress="showProgress"
|
||
|
|
:play-time="playTime"
|
||
|
|
/>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { useVModel } from "@vueuse/core";
|
||
|
|
import AliPlayer from "@/components/ali-player/index.vue";
|
||
|
|
import { ref, watchEffect } from "vue";
|
||
|
|
|
||
|
|
const VITE_FILE_URL = import.meta.env.VITE_FILE_URL;
|
||
|
|
defineOptions({
|
||
|
|
name: "LayoutVideo",
|
||
|
|
});
|
||
|
|
const props = defineProps({
|
||
|
|
src: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
vid: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
playAuth: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
visible: {
|
||
|
|
type: Boolean,
|
||
|
|
required: true,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
appendToBody: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
cover: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
autoplay: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
showProgress: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
playTime: {
|
||
|
|
type: Number,
|
||
|
|
default: 0,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const emits = defineEmits(["update:visible"]);
|
||
|
|
const visible = useVModel(props, "visible", emits);
|
||
|
|
const playerRef = ref(null);
|
||
|
|
const fnSrc = (src) => {
|
||
|
|
if (!src) return;
|
||
|
|
if (src.indexOf("http") !== -1 || src.indexOf("https") !== -1) return src;
|
||
|
|
else return VITE_FILE_URL + src;
|
||
|
|
};
|
||
|
|
watchEffect(() => {
|
||
|
|
if (visible.value) {
|
||
|
|
playerRef.value && playerRef.value.play();
|
||
|
|
} else {
|
||
|
|
playerRef.value && playerRef.value.pause();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss"></style>
|