<template>
  <a-card :bordered="false" title="课件预览">
    <template slot="extra">
      <h4 style="margin-right: 15px; display:inline-block">课程类别</h4>
      <a-button size="small" @click="goback">返回</a-button>
    </template>

    <div style="width:100%">
      <a-row>
        <a-col :span="14">
          <!-- 这里面对应放视频 -->
          <!-- <h1>视频视频视频</h1> -->
          <video-player
            class="vjs-custom-skin"
            ref="videoPlayer"
            :options="playerOptions"
            :playsinline="true"
          >
          </video-player>
        </a-col>
        <a-col :span="10" style="flex-shrink: 0;">
        </a-col>
      </a-row>
    </div>
  </a-card>
</template>

<script>
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import { videoPlayer } from 'vue-video-player'
import { coursewareDeatil } from '@/api/course/courseware'

export default {
  components: { videoPlayer },
  data() {
    return {
      queryParam: { id: this.$route.query.coursewareId },
      courseware: [], //课件详情
      playerOptions: {
        // width: 800,
        height: '360',
        fluid: true,
        autoplay: true,
        muted: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            type: 'video/mp4',
            src: 'http://vjs.zencdn.net/v/oceans.mp4'
          }
        ],
        poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg'
      }
    }
  },
  created() {
    let parameter = {}
    coursewareDeatil(Object.assign(parameter, this.queryParam)).then(res => {
      console.log(res)
      this.courseware = res
    })
  },
  methods: {
    //返回
    goback() {
      this.$router.push({ path: '/course/CourseList', query: {} })
    }
  }
}
</script>
<style lang="less" scoped>
.vjs-custom-skin {
  width: 100%;
}
</style>
