<template>
  <div
    :style="{
      width: Math.round(attributeJson.baseStyle.w * ratio) + 'px',
      height: Math.round(attributeJson.baseStyle.h * ratio) + 'px',
      left: Math.round(attributeJson.baseStyle.l * ratio) + 'px',
      top: Math.round(attributeJson.baseStyle.t * ratio) + 'px'
    }"
    class="video-wrap"
  >

    <div v-show="videoItem.length !== 0">
      <div v-entrance="{video: attributeJson.videoInfo}" class="entrance-con">
        <div
          :class="['video-con', animationInObj.type && entranceShow ? enterClass : '']"
          v-show="entranceShow"
          :style="{
            width: Math.round(attributeJson.baseStyle.w * ratio) + 'px',
            height: Math.round(attributeJson.baseStyle.h * ratio) + 'px',
            animationDuration: `${animationInObj.duration}s`
          }">

          <myVideoPlayer :sort="new Date().getTime()" :videoInfo="videoInfo" :autoPlay="autoPlay"></myVideoPlayer>
          <!-- 热区图片 -->
          <div class="hot-image" v-if="attributeJson.isVideoHasHot === 1 && videoHotPic.length != 0">
            <img :src="videoHotPic[0].resourcePath" alt="" />
            <hotspot v-on="$listeners" :item="hotData" :ratio="ratio"></hotspot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import videoItemJs from "./videoItem.js";
export default videoItemJs;
</script>

<style lang="scss" scoped>
@import "videoItem";
</style>
