<template>
  <div >
    <video ref="videoPlayer" controls :style="`width:${realWidth};height:${realHeight};`">
      <source :src="`${realSrc}`" type="video/mp4">
    </video>
  </div>
</template>

<script>
import {isExternal} from "@/utils/validate";

export default {
  props: {
    videoSrc: {
      type: String,
      required: true
    },
    width: {
      type: [Number, String],
      default: "300"
    },
    height: {
      type: [Number, String],
      default: ""
    }
  },
  /*mounted() {
    this.$refs.videoPlayer.load()
  },*/
  computed:{
    realSrc() {
      if (!this.videoSrc) {
        return;
      }

      this.$nextTick(() => {
        this.$refs.videoPlayer.load();
      })

      let real_src = this.videoSrc.split(",")[0];
      if (isExternal(real_src)) {
        return real_src;
      }
      return process.env.VUE_APP_BASE_API + real_src;
    },
    realWidth() {
      return typeof this.width == "string" ? this.width : `${this.width}px`;
    },
    realHeight() {
      return typeof this.height == "string" ? this.height : `${this.height}px`;
    }
  },
  methods: {
    // 暂停 播放
    pausePlay() {
      this.$refs.videoPlayer.pause();
    }
  }
}
</script>
