<script setup>
import {
  JsvPlayer,
  globalLoadJsvPlayerPlugin,
} from "@shijiu/jsview-vue/utils/JsViewPlugin/JsvPlayer";

const props = defineProps({
  top: {
    type: Number,
    default: 0,
  },
  left: {
    type: Number,
    default: 0,
  },
  width: {
    type: Number,
    require: true,
  },
  height: {
    type: Number,
    require: true,
  },
});

globalLoadJsvPlayerPlugin((status) => {
  console.log("JsvPlayer plugin load status: " + status);
});

// const video_url = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/FilterDemo/VideoLayer/52fae4231350c85fec605b47bbe479c5.mp4";
const video_url =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/FilterDemo/VideoLayer/cctv1_1080_25fps.mp4";
</script>

<style scoped>
@keyframes opacityVideoDemo_CompositeOpacity {
  from {
    opacity: 0.1;
  }
  to {
  }
}
</style>

<template>
  <div
    className="blockStyle"
    :style="{
      top: props.top,
      left: props.left,
      width: props.width,
      height: props.height,
      backgroundColor: '#0000FF',
      animation: 'opacityVideoDemo_CompositeOpacity 3s infinite',
    }"
  >
    <JsvPlayer
      :src="video_url"
      autoplay="autoplay"
      loop="loop"
      :style="{
        top: 5,
        left: 5,
        width: props.width - 10,
        height: props.height - 10,
      }"
    />
  </div>
</template>
