逻辑：

1.课程详情页加载后，用token判断用户是否登录，登录状态则调用checkAuth的接口（只传入courseId），后端会返回hasAuth为true/false

2.点击某一章节时，登录状态则调用checkAuth的接口（传入courseId & chapterId），后端会返回hasAuth为true/false和videoId，如果这俩都有，则跳页面到视频播放页

3.跳转到视频播放页，加载完毕：请求课程详情接口、getPlay接口（传入courseId & chapterId）——后端返回formt,videoURL,duration等

功能：

4.自动跳转至上次播放时间：

        加载完视频播放页，调checkHistory得到上次的记录——接着使用视频控制进度的组件uni.createVideoContext的seek方法，将checkHistory返回的lastTime传入

5.记录播放历史：

        video标签上绑定@timeupdate方法，这个方法在播放进度变化时触发，也就是只要在播放就在不停的触发，所以每次进入方法都this.timer++,当它等于25时也就是每隔6s，调用recordHistory记录播放进度的接口，并使this.timer变回为1

6.倍速播放：

        下载f-drop-menu插件，绑定videoList，以及changeSpeed事件，使用视频控制进度的组件uni.createVideoContext的playbackRate方法

7.下一节／重学一次

        在data中，分别用new Map来new空的实例对象 ，Map字典数据结构是为了方便以[键，值]的形式存储数据，给每个小节做标记。

        在初次进入视频页，调课程详情接口时，返回的数据是章嵌套节的结构。所以先循环章，再循环节，将这个实例对象使用set方法，将小节信息设置成键值对的数组，目的是为了给每个小节做标记。

        给video绑定了ended事件——在播放结束时用这个实例对象的get方法查找读取key对应的键值，找到下一个章节对应的信息。

        判断——如果下个章节有内容，就提示下一节/重学的选项。

8.视频防盗

        在video标签中加上视频来源，否则后端会判断为为非法入侵。

<template>
  <view class="course-play">
    <u-navbar title="视频" class="header"></u-navbar>
    <video id="myVideo" :src="videoUrl" controls :header="{'Referer':'http://testapp.cn'}" :poster="cover"
      @timeupdate="timeupdate" @ended="playEnded" class="video-play"></video>
    <view class="video-control">
      <view class="" @tap="dropSpeed">倍速：{
   {speed}}</view>
      <f-drop-menu :list="videoList" v-model="show" @click="changeSpeed"></f-drop-menu>
    </view>
    <view class="tabs">
      <u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
        swiperWidth="750"></u-tabs-swiper>
    </view>
    <swiper class="swiper" :current="swiperCurrent">
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="height: 800rpx;width: 100%;">
          <u-collapse accordion class="ui-collapse" :border="false" event-type="close">
            <u-collapse-item :title="item.chapterName" :open="index === 0" v-for="(item,index) in catalogueList"
              :key="item.id">
              <view class="child-item" v-for="child in item.children" :key="child.id"
                :class="child.id === current ? 'collapse-active':''" @tap="goPlay(child)">
                <view class="video-box">视频</view>
                <view class="content-box">{
   {child.chapterName}}</view>
              </view>
            </u-collapse-item>
          </u-collapse>
        </scroll-view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="height: 800rpx;width: 100%;">
          <Download :downloadList="downloadList"></Download>
        </scroll-view>
      </swiper-item>
    </swiper>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import Download from '@/common/course-detail/download/index.vue'
  import courseApi from '@/service/coursedetail.js'
  import playApi from '@/service/play.js'
  export default {
    data() {
      return {
        speed: 'X1.0',
        show: false, //默认不显示
        videoList: [{
          name: '0.5',
          style: {

          }
        }, {
          name: '1.0',
          style: {

          }
        }, {
          name: '1.25',
          style: {

          }
        }, {
          name: '1.5',
          style: {

          }
        }],
        courseId: null,
        chapterId: null,
        swiperCurrent: 0,
        current: 0,
        list: [{
          name: '目录'
        }, {
          name: '下载笔记代码'
        }],
        downloadList: [],
        catalogueList: [],
        clientHeight: 0,
        cover: null, // 封面图
        videoUrl: null, // 视频
        totalTime: null, // 总时长
        timer: 1, // 控制
        indexMap: new Map(), //保存
        maps: new Map(),
        videoContext: null, // 视频控制组件
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo
      }),
      curId() {
        // curId 
        if (this.chapterId !== 0) {
          return this.chapterId
        } else {
          // 第一个章节里面第一个小节
          return this.catalogueList[0].children[0].id
        }
      },
    },
    components: {
      Download
    },
    onReady() {
      //视频进度控制组件
      this.videoContext = uni.createVideoContext('myVideo')
      // 动态获取头部高
      const query = uni.createSelectorQuery().in(this);
      query.select('.header').boundingClientRect(data => {
        uni.getSystemInfo({
          success: (res) => {
            this.clientHeight = res.screenHeight - data.height
          }
        });
      }).exec();
      // video
      query.select('.video-play').boundingClientRect(data => {
        this.clientHeight = this.clientHeight - data.height
      }).exec();
      // video-control
      query.select('.video-control').boundingClientRect(data => {
        this.clientHeight = this.clientHeight - data.height
      }).exec();
      // 切换
      query.select('.tabs').boundingClientRect(data => {
        this.clientHeight = this.clientHeight - data.height
      }).exec();
    },
    onLoad(params) {
      this.courseId = params.courseId
      this.chapterId = params.chapterId
      // 如果是点击了重学跳过来的 就有restudy
      let restudy = params.restudy
      this.__init()
      if (!restudy) {
        this.checkHistory()
      }
    },
    methods: {
      //点击倍速
      dropSpeed() {
        this.show = !this.show
      },
      //切换倍速
      changeSpeed(item) {
        this.speed = 'X' + item.name
        this.videoContext.playbackRate(Number(item.name))
        this.show = false
      },
      __init() {
        // 获取课程 详情
        //获取课程详情
        courseApi.getClassDetail({
          classId: this.courseId
        }).then(res => {
          if (res.meta.code === '200') {
            //当前课程的目录
            this.catalogueList = res.data.data.bizCourseChapters
            //笔记代码
            this.downloadList = res.data.data.bizCourseAttachments
            let idx = 0;
            //先循环章
            res.data.data.bizCourseChapters.map((item, index) => {
              //再循环节 
              item.children.map((ele) => {
                //本课程所有小节 组成一个不重复的数组 给每个小节做标记
                this.indexMap.set(ele.id, idx) // 节 [{'节ID'，0},{'节ID',1}]
                this.maps.set('chapter_' + idx, ele) //[{'chapter_0'，节信息},{'chapter_1',节信息}]
                idx++
              })
            })
          } else { //非200

          }
        }).catch(err => {
          console.log(err)
        })
        // 视频播放
        playApi.getPlay({
          courseId: this.courseId,
          chapterId: this.chapterId
        }).then(res => {
          if (res.meta.code === '200') {
            let playInfoList = res.data.playInfo.playInfoList
            let chapterInfo = res.data.chapterInfo //封面图
            let arr = playInfoList.filter(item => {
              if (item.format === 'mp4') {
                return item
              }
            })
            console.log(arr) //[{}]
            let obj = arr[0] //含videoUrl,format,duration的对象
            this.videoUrl = obj.playURL
            this.totalTime = obj.duration
            this.cover = chapterInfo.chapterLitpic
          }
        }).catch(err => {
          console.log(err)
        })

      },
      //查询上一次播放的进度
      checkHistory() {
        playApi.checkHistory({
          memberId: this.userInfo.id,
          courseId: this.courseId,
          chapterId: this.chapterId
        }).then(res => {
          if (res.meta.code === '200') { //查询到进度 并且用控件调整进度
            this.videoContext.seek(Number(res.data.data.lastTime))
          }
        }).catch(err => {
          console.log(err)
        })
      },
      //历史记录
      recordHistory(lastTime) {
        playApi.recordHistory({
          chapterId: this.chapterId,
          courseId: this.courseId,
          memberId: this.userInfo.id,
          lastTime: lastTime //上次观看时间
        }).then(res => {
          if (res.meta.code === '200') { //记录成功
            this.timer = 1
          } else {
            //记录失败
          }
        }).catch(err => {
          console.log(err)
        })
      },
      //播放进度变化时触发 历史记录 存储播放进度
      timeupdate(e) {
        let curTime = e.detail.currentTime
        console.log(curTime)
        if (this.timer === 25) {
          //调一次记录历史记录的接口
          this.recordHistory(curTime)
          console.log('记录')
        }
        this.timer++ //每次变化+1
      },
      //播放结束
      playEnded(e) {
        this.recordHistory(this.totalTime)
        // this.indexMap.set(ele.id,idx)// 节 [{'节ID'，0},{'节ID',1}]
        // this.maps.set('chapter_'+idx,ele)//[{'chapter_0'，节信息},{'chapter_1',节信息}]
        //查找对应项
        let index = this.indexMap.get(this.chapterId); //idx
        let nextChapter = this.maps.get('chapter_' + (index + 1)) //后面一章的节信息
        if (nextChapter) { //如果后面还有
          //下一个小节 视频
          uni.showModal({
            title: '提示',
            content: '继续下一小节',
            confirmText: '下一小节',
            cancelText: '重学',
            success: res => {
              if (res.confirm) {
                //继续学 下一小节
                uni.redirectTo({
                  url: '/pages/course-play/course-play?courseId=' + this.courseId + '&chapterId=' +
                    nextChapter.id
                })
              } else if (res.cancel) {
                //重学
                uni.redirectTo({
                  url: '/pages/course-play/course-play?courseId=' + this.courseId + '&chapterId=' + this
                    .chapterId + '&restudy=' + 'true'
                })
              }
            }
          });
        } else {
          this.$refs.uToast.show({
            title: '恭喜你学完本课程',
            type: 'success',
            icon: false
          })
        }
      },
      //播放另一个章节
      goPlay() {
        this.chapterId = child.id
        //关闭当前页 重定向
        uni.redirectTo({
          url: '/pages/course-play/course-play?courseId=' + this.courseId + '&chapterId=' + child.id
        })
      },
      tabsChange(){
        
      }
    }
  }
</script>