<template>
  <div class="video_box">
    <template v-if="!isShowMultiple && show" style="display: flex">
      <div>
        <vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" :options="options" style="width: 80%;margin-left: 10%"/>
      </div>
    </template>
  </div>
</template>

<script>
import { string } from 'yargs'

export default {
  name: 'VideoBoxA',
  data() {
    return {
      options: {
        // source:'//player.alicdn.com/video/aliyunmedia.mp4',
        isLive: true // 切换为直播流的时候必填（true-直播状态，false-普通模式，播放器普通视频）
      },
      source: 'http://118.122.17.165:83/openUrl/lfwY4CY/live.m3u8',
      show: true,
      isShowMultiple: false
    }
  },
  props: {
    src: {
      type: string,
      require: true
    }
  },
  mounted() {
    this.vedio = this.$refs.video
    this.vedio.play()
  },
  methods: {
    play() {
      this.$refs.VueAliplayerV2.play()
    },
    pause() {
      this.$refs.VueAliplayerV2.pause()
    },
    replay() {
      this.$refs.VueAliplayerV2.replay()
    }
    // fullScree() {
    //   if (this.vedio) {
    //     console.log(this.vedio)
    //
    //     this.vedio.requestFullscreen()
    //
    //     //  this.vedio.exitFullscreen()
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
.video_box {
  width: 80%;
  height: 40%;
  overflow: hidden;
  position: relative;

  video {
    width: 100%;
    height: 100%;
  }
}

</style>