84 lines
2.2 KiB
Vue
84 lines
2.2 KiB
Vue
<template>
|
|
<div>
|
|
<el-dialog v-if="isDialog" v-model="visible" title="视频" :append-to-body="appendToBody">
|
|
<app-ali-player
|
|
ref="playerRef"
|
|
:source="fnSrc(src)"
|
|
:vid="vid"
|
|
:play-auth="playAuth"
|
|
:visible="visible"
|
|
:cover="cover"
|
|
:autoplay="autoplay"
|
|
:show-progress="showProgress"
|
|
:play-time="playTime"
|
|
:is-live="isLive"
|
|
:width="width"
|
|
:height="height"
|
|
/>
|
|
</el-dialog>
|
|
<app-ali-player
|
|
v-else
|
|
ref="playerRef"
|
|
:source="fnSrc(src)"
|
|
:vid="vid"
|
|
:play-auth="playAuth"
|
|
:visible="visible"
|
|
:cover="cover"
|
|
:autoplay="autoplay"
|
|
:show-progress="showProgress"
|
|
:play-time="playTime"
|
|
:is-live="isLive"
|
|
:width="width"
|
|
:height="height"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useTemplateRef, watchEffect } from "vue";
|
|
import { ElDialog } from "element-plus";
|
|
import "element-plus/es/components/dialog/style/css";
|
|
import AppAliPlayer from "../ali-player/index.vue";
|
|
import { getFileUrl } from "../../utils/index.js";
|
|
|
|
defineOptions({
|
|
name: "AppVideo",
|
|
});
|
|
const props = defineProps({
|
|
src: { type: String, default: "" },
|
|
vid: { type: String, default: "" },
|
|
playAuth: { type: String, default: "" },
|
|
appendToBody: { type: Boolean, default: false },
|
|
cover: { type: String, default: "" },
|
|
autoplay: { type: Boolean, default: true },
|
|
showProgress: { type: Boolean, default: true },
|
|
playTime: { type: Number, default: 0 },
|
|
isDialog: { type: Boolean, default: true },
|
|
isLive: { type: Boolean, default: false },
|
|
width: { type: String, default: "100%" },
|
|
height: { type: String, default: "600px" },
|
|
});
|
|
const visible = defineModel("visible", {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
});
|
|
const playerRef = useTemplateRef("playerRef");
|
|
const fnSrc = (src) => {
|
|
if (!src) return;
|
|
if (src.indexOf("http") !== -1 || src.indexOf("https") !== -1) return src;
|
|
else return getFileUrl() + src;
|
|
};
|
|
watchEffect(() => {
|
|
if (props.isDialog) {
|
|
if (visible.value) {
|
|
playerRef.value && playerRef.value.play();
|
|
} else {
|
|
playerRef.value && playerRef.value.pause();
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss"></style>
|