<template>
  <div class="video_box">
    <div class="top">
      <van-icon
        name="cross"
        class="closeIcon"
        @click="closeVideo"
      />
    </div>
    <div class="video">
      <video
        ref="videoPlayer"
        class="video-js"
        id="videoplayer"
      ></video>
    </div>
  </div>
</template>
<script>
import videojs from 'video.js';
export default {
  data () {
    return {
      player: null,
    }
  },
  computed: {
    src () {
      return this.$route.query.src
    }
  },
  methods: {
    // 实例化播放器
    createVideo () {
      let options = {
        autoplay: false,
        controls: true,
        sources: [
          {
            src: 'https://inno.sh-sict.com/gastric-api/gastric-cancer-data/file/show?videoName=' + this.src,
          }
        ]
      }
      this.player = videojs('videoplayer', options, function onPlayerReady () {
        console.log('onPlayerReady', this);
      })
    },
    closeVideo () {
      this.$router.go(-1)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.createVideo()
    })
    this.$once('hook:beforeDestroy', () => {
      this.player.dispose();
    })
  },
}
</script>
<style lang="scss" scoped>
.video_box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
  .top {
    height: 40px;
    background: #000;
    text-align: right;
    color: #fff;
    font-size: 20px;
    padding: 5px 10px 0 0;
  }
  .video {
    flex: 1;
  }
}
#videoplayer {
  width: 100%;
  height: 100%;
}

::v-deep .video-js .vjs-big-play-button {
  font-size: 0.5rem;
  width: 1.5rem;
  height: 0.8rem;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
</style>