dy-admin-manager/src/layout/components/insVideo.vue

<template>
  <div class="videoBox">
    <vue-drag-resize
      :w="videoW"
      :h="videoH"
      :y="videoY"
      :x="videoX"
      :isActive="true"
      :parentH="docY"
      :preventActiveBehavior="true"
      :AspectRatio="true"
      @resizing="onResizingVideo"
      @dragging="onResizing"
      @resizestop="resizeVideostop"
      @dragstop="resizeVideostop"
      class="videoWrap"
    >
      <!--        -->
      <div class="videowall"></div>
      <div class="showBtnList">
        <i class="el-icon-close" @click="closeVideo"></i>
      </div>
      <video
        id="video"
        :src="src"
        :width="VideoWidth"
        :height="VideoHeight"
        controls
        loop
      ></video>
    </vue-drag-resize>
  </div>
</template>
<script>
import VueDragResize from "vue-drag-resize";
export default {
  components: {
    "vue-drag-resize": VueDragResize,
  },
  props: ["docY","videoSrc"],
  data() {
    return {
      videoX: 0,
      videoY:200,
      videoW: 640,
      videoH: 390,
      src: this.videoSrc,
    };
  },
  mounted() {
    let clientWidth =
      document.documentElement.clientWidth || document.body.clientWidth;
    this.videoX = (clientWidth - 640) / 2;
    this.videoY = (this.docY - 320) / 2;
  },
  methods: {
    onResizingVideo(e) {
      this.$emit('isResizing',true)
      // this.isResizing = true;
      this.videoH = Math.abs(e.height);
      this.videoW = Math.abs(e.width);
    },
    resizeVideostop(e) {
      this.videoH = Math.abs(e.height);
      this.videoW = Math.abs(e.width);
      setTimeout(() => {
        // this.isResizing = false;
          this.$emit('isResizing',false)
      }, 500);
    },
    onResizing(e) {
      // this.isResizing = true;
      this.$emit('isResizing',true)
    },
    closeVideo(){
      this.$emit('closeVideo')
    }
  },
  computed: {
    VideoWidth() {
      return this.videoW + "px";
    },
    VideoHeight() {
      return this.videoH - 30 + "px";
    },
  },
};
</script>
<style lang="scss" scoped>
.videowall {
  height: 30px;
  background-color: #ccc;
}
.content-container {
  // position: relative;
  // z-index: 2000;
  .showBtnList {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    font-size: 20px;
    position: absolute;
    right: 5px;
    top: 0;
    background-color: #ccc;
    height: 30px;
    // z-index: 2000;
    .icon {
      line-height: 30px;
    }
  }
}
.videoWrap {

  background-color: #fff;

  position: fixed;
  z-index: 20000;
  border: 1px solid #ccc;
}

</style>