<template>
  <video
    controls="controls"
    :muted="muted"
    autoplay="autoplay"
    loop="loop"
    :style="styleColor"
    :src="styleColor.videoAdress"
  >
    您的浏览器不支持 video 标签。
  </video>
</template>

<script>
export default {
  name: "WidgetVideo",
  components: {},
  props: {
    value: Object,
    ispreview: Boolean
  },
  data() {
    return {
      options: {}
    };
  },
  computed: {
    //播放按钮显示
    // controls() {
    //   return this.options.setup.controls?"controls":"";
    // },
    // //播放按钮显示
    // autoplay() {
    //   return this.options.setup.autoplay?"autoplay":"";
    // },
    //静音
    muted() {
      return this.options.setup.muted?"muted":"";
    },
    //循环
    // loop() {
    //   return this.options.setup.loop?"loop":"";
    // },
    transStyle() {
      return this.objToOne(this.options);
    },
    styleColor() {
      return {
        position: this.ispreview ? "absolute" : "static",
        width: this.transStyle.width + "px",
        height: this.transStyle.height + "px",
        left: this.transStyle.left + "px",
        top: this.transStyle.top + "px",
        right: this.transStyle.right + "px",
        videoAdress: this.transStyle.videoAdress
      };
    }
  },
  watch: {
    value: {
      handler(val) {
        this.options = val;
      },
      deep: true
    }
  },
  mounted() {
    this.options = this.value;
  },
  methods: {}
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
}
video {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
