<template>
  <div class="study-video">
    <!-- 视频播放器容器 -->
    <video
      id="my-video"
      class="video-js"
      controls
      data-setup="{}"
      height="100%"
      preload="auto"
      width="100%"
    >
      <!-- 视频源，指定视频文件和类型 -->
      <source :src="videoUrl" type="application/x-mpegURL" />
    </video>
  </div>
</template>

<script>
export default {
  name: 'VideoPreview',
  props: {
    fileUrl: {
      default: '',
      type: String
    }
  },
  components: {},
  data() {
    return {
      player: null // video.js 的播放器实例
    }
  },
  computed: {
    actionUrl: _ => window.context.portal,
    videoUrl() {
      return this.actionUrl + this.fileUrl
    }
  },
  created() {},
  mounted() {
    this.creatVideo()
  },
  methods: {
    creatVideo() {
      // 在组件挂载完成后初始化视频播放器，并设置事件监听
      const _this = this
      this.player = this.$videoJs(
        this.$el.querySelector('#my-video'),
        {
          language: 'zh-CN',
          bigPlayButton: false,
          textTrackDisplay: false,
          posterImage: true,
          errorDisplay: false,
          controlBar: true
        },
        function() {
          _this.initializePlayerEvents()
        }
      )
      this.$nextTick(() => {
        this.player.src({
          type: 'application/x-mpegURL',
          src: this.videoUrl
        })
      })
    },

    // 注册视频播放器的事件监听
    initializePlayerEvents() {
      this.player.on('loadedmetadata', () => {
        this.player.play()
        this.$emit('onLoad')
      })
      this.player.on('error', () => this.$emit('onError')) // 加载错误
    }
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  }
}
</script>

<style lang="scss" scoped>
.study-video {
  width: 100%;
  height: 100%;

  ::v-deep .video-js {
    width: 100%;
    height: 100%;

    .vjs-control-bar {
      height: 40px;

      * {
        font-size: 16px;
      }

      .vjs-load-progress {
        display: none;
      }

      /* 已播放部分的样式 */
      .vjs-progress-holder {
        background-color: #666; /* 暗色表示未观看 */
        position: relative;

        /* 标记禁用状态的光标样式 */
        //cursor: not-allowed;
      }

      /* 进度条的总体背景，表示未播放的部分 */
      .vjs-play-progress {
        background-color: #3399ff; /* 明亮的颜色表示已观看部分 */
        /* 在已播放区域显示正常的指针 */
        cursor: pointer;

        &::after {
          font-size: 16px;
        }
      }

      /* 加载但未播放部分的样式 */

      .vjs-load-progress {
        background-color: #999; /* 中等明亮的颜色 */
      }

      .vjs-mouse-display {
        * {
          font-size: 16px;
        }
      }

      .vjs-button {
        font-size: 12px;
      }

      .vjs-remaining-time-display {
        line-height: 40px;
      }
    }

    .vjs-big-play-button {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      height: 50px;
      line-height: 53spx;

      .vjs-icon-placeholder {
        font-size: 32px;
      }
    }
  }
}
</style>
