<!--
 * @Description: 公共课程详情
 * @Author: 空白格
 * @Date: 2023-04-24 14:43:30
 * @LastEditors: 空白格
 * @LastEditTime: 2023-04-24 17:08:06
 * @FilePath: \veterans_client_web\src\views\PublicClasses\ClassesVideo\ClassesVideoIndex.vue
 * @Copyright: Copyright (c) 2016~2023 by 空白格, All Rights Reserved.
-->
<template>
  <div class="video">
    <div class="video-box" v-loading="loading">
      <div class="video-box-title">{{ chapterName }}</div>
      <video
        ref="video"
        id="myVideo"
        @timeupdate="timeUpdate"
        :src="videoUrl"
        controls
        :initial-time="initial_time"
        object-fit="fill"
        play-btn-position="center"
        @ended="ended"
        @loadedmetadata="loadedmetadata"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "ClassesVideoIndex",
  data() {
    return {
      videoUrl: "",
      initial_time: "",
      chapterName: '',
      loading: false
    };
  },
  created() {
    const { videoUrl, chapterName } = this.$route.query
    if (videoUrl) {
      this.loading = false;
    }
    this.videoUrl = videoUrl
    this.chapterName = chapterName
  },
  methods: {
    timeUpdate() {},
    ended() {},
    loadedmetadata() {
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.video {
  background: #181c1e;

  &-box {
    width: 70%;
    min-width: 600px;
    margin: 0 auto;
    padding: 10px 0 40px;

    &-title {
      font-size: 20px;
      color: #fff;
      line-height: 22px;
      padding: 10px 0;
    }

    video {
      width: 100%;
      background-color: #fff;
      aspect-ratio: 16 / 8;
    }
  }
}
</style>
