<script>
import { inject } from 'vue'
import { Options, Vue } from "vue-class-component";
import MediaFrame from "./MediaFrame";

@Options({
  components: {
    MediaFrame,
  },
})
class VideoFrame extends Vue {
  constructor(props) {
    super(props);

    this.videoCtrl = inject('videoCtrl');

    this.videoUrl = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MediaDemo/components/frames/VideoFrame/neza.mp4";
  }
}

export default VideoFrame;
</script>

<template>
<MediaFrame
  tagName="video"
  :src="videoUrl"

  :style="{
    ...videoCtrl.layout,
    visibility: videoCtrl.visibility,
    objectFit: videoCtrl.objectFit,
    borderRadius: '80 80 160 240',
  }"
/>
</template>

<style scoped>
</style>
