<template>
  <div class="bubble">
    <div class="title">{{ info.attribute }}</div>
    <div class="video">
      <videoPlayer ref="videoRef" :options="videoOptions" @play="handlePlay" @pause="handlePause" @time-update="handleUpdate" />
    </div>
  </div>
</template>

<script setup >
import { ref, reactive, toRefs, watch, onMounted, getCurrentInstance } from 'vue'
import videoPlayer from '@/components/VideoPlayer/index.vue'

// const emit = defineEmits([""])
const props = defineProps({
  info: {
    type: String,
    default: ''
  }
})
const { info } = toRefs(props)

const videoOptions = {
  videoUrl: 'video/video.mp4',
  live: false,
  autoPlay: false
}

</script>
<style lang="less" scoped>
.bubble{
  width:500px;

}
</style>
