<!-- 
 * @Description: 预警管理
 * @Author: huguodong 
 * @Date: 2023-12-15 15:44:05
!-->
<template>
  <div class="video-box">
    <videoPlay v-if="options.src" ref="aplayVideo" v-bind="options" @play="onPlay" />
  </div>
</template>
  
  <script setup lang="tsx" name="sysSpa">
import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue3-video-play";
const onPlay = ev => {
  console.log("播放");
};
const props = defineProps({
  videoUrl: String,
  videoType: String
});
// 视频播放组件
const options = reactive({
  type: "",
  width: "100%", //播放器高度
  height: "100%", //播放器高度
  color: "#409eff", //主题色
  title: "", //视频名称
  webFullScreen: false, //网页全屏
  speed: true, //是否支持快进快退
  currentTime: 0, //跳转到固定播放时间(s)
  muted: false, //静音
  autoPlay: true, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  control: true, //是否显示控制器
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量0-1
  src: "", //视频源
  poster: "", //封面
  speedRate: [1.0, 1.25, 1.5, 2.0], // 可选的播放速度
  controlBtns: [
    "audioTrack", //音轨切换按钮
    "quality", //视频质量切换按钮
    "speedRate", //速率切换按钮
    "volume", //音量
    "setting", //设置
    "pip", //画中画按钮
    "pageFullScreen", //网页全屏按钮
    "fullScreen" //全屏按钮
  ] //显示所有按钮,
});

// 监视props.msg的变化
watch(
  () => props.videoType,
  newValue => {
    if (newValue) {
      options.type = newValue;
      console.log(options.type);
    } else {
      options.type = "video/mp4";
    }
  },
  { deep: true, immediate: true }
);
watch(
  () => props.videoUrl,
  newValue => {
    options.src = newValue;
  },
  { deep: true, immediate: true }
);

onMounted(() => {
  // 在这里执行其他需要在组件挂载后运行的代码
});
</script>
  
  <style lang="scss" scoped>
</style>
  