integrated_traffic_vue/src/components/video/index.vue

<template>
  <el-dialog title="视频" v-model="visible">
    <ali-player
      :source="fnSrc(src)"
      :vid="vid"
      :play-auth="playAuth"
      ref="playerRef"
    />
  </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,
  },
});
const emits = defineEmits(["update:visible"]);
const visible = useVModel(props, "visible", emits);
const playerRef = ref(null);
const fnSrc = (src) => {
  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>