<template>
  <div class="video_box">
    <div class="top">
      <van-icon
        name="cross"
        class="closeIcon"
        @click="closeVideo"
      />
    </div>
    <div class="video">
      <!-- <video
        id="video"
        controls
        preload="auto"
        loop="loop"
        x5-video-player-fullscreen="true"
        x5-video-orientation="portraint"
        playsinline="true"
        x5-video-player-type="h5"
        style="object-fit:fill"
      >
        <source :src="src">
      </video> -->

      <video
        ref="videoPlayer"
        class="video-js"
        id="videoplayer"
        playsinline="true"
        preload="none" 
        x5-video-player-type="h5"
        x-webkit-airplay="true"
        webkit-playsinline="true"
      >
      </video>
    </div>
  </div>
</template>
<script>
import videojs from 'video.js';

export default {
  data () {
    return {
      player: null,
    }
  },
  computed: {
    src () {
      return 'https://inno.sh-sict.com/gastric-api/gastric-cancer-data/file/show?videoName=' + this.$route.query.src
    }
  },
  methods: {
    // 实例化播放器
    createVideo () {
      let options = {
        width: this.width,
        autoplay: false,
        controls: true,
        sources: [
          {
            src: this.src,
            type: "video/mp4",
          },
          {
            src: this.src,
            type: "video/ogg",
          },
          {
            src: this.src,
            type: "video/webm",
          }
        ]
      }
      this.player = videojs('videoplayer', options, function onPlayerReady () {
        console.log('onPlayerReady', this);
      })
    },
    closeVideo () {
      this.$router.go(-1)
    }
  },
  mounted () {
    videojs.addLanguage('zh-CN', {
      "You aborted the media playback": "视频播放被终止",
      "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
      "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。请尝试使用uc浏览器或qq浏览器。",
      "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
      "No compatible source was found for this media.": "无法找到此视频兼容的源。",
    });
    this.$nextTick(() => {
      setTimeout(() => {
        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>