fanruan-edu-cas/src/views/class/play.vue

<template>
  <div v-wechat-title="'正在播放：' +play_title"></div>
  <appHeader />
  <div v-if="!com_user_token">
    <el-empty :image-size="200" description=" ">无权限查看，当前页面需要 <a
        :href="com_id_url+'/signin/'+'?referrer='+com_edu_url+$route.path" class="col008">登录</a></el-empty>
  </div>
  <div v-if="isAuth">
    <div class="main">

      <div class="videoBox flex-2">
        <div class="viewtil" style="min-height:8%">
          <el-page-header @back="goBack" title="返回班级" :content="video.title">
          </el-page-header>
        </div>
        <div id="VideoPlay" style=" width:100%; height: 92%;  margin-top: auto;"></div>

        <div class="autotime" v-show="showAutoBox">
          <div class="pssbox flex-5">
            <div class="pos-box">
              <div class="txt">本节视频已看完</div>
  
              <div v-if="playThisId != playNextId && playNextId != 0">
                <div class="txt_next">下一节：<span class="fw600">{{playNextTitle}}</span></div>
                <div class="sel_btn_box flex-3">
                  <div class="btn_sty" @click="getvideo_click(playThisId,1);">重播</div>
                  <div class="btn_sty" @click="getvideo_click(playNextId);">播放下一节</div>
                </div>
              </div>
  
              <div v-else>
                <div class="txt_next">已是最后一节</div>
                <div class="sel_btn_box flex-3">
                  <div class="btn_sty" style="margin: 0 auto;" @click="getvideo_click(playThisId,1);">重播</div>
                </div>
              </div>
              
            </div>
          </div>
        </div>
  

      </div>

      <div class="navbox" id="videoList">

        <div class="classtil">
          <router-link :to="'/class/'+classid">{{video.className}}</router-link>
        </div>

        <div class="cate">
          <i class="iconfont icon-mulu"></i>
          <span>课程章节</span>
        </div>

        <el-scrollbar style="height: 86%; overflow: hidden;" ref="myscroll">

          <div style="padding-bottom: 40px;">
            <div class="looplist" v-for="(item, i) in lessonList" :key="i">
              <div class="otile hide-txt">{{item.title}}</div>

              <div v-if="item.video.length===0" class="novideo col617">等待老师发布...</div>
              <ul class="vlist">
                <li class="item" v-for="(item, i) in item.video" :key="i">
                  <!-- <el-tooltip :content="item.title" placement="left" effect="light"> -->
                  <a class="a-play flex-1" href="javascript:;" @click="getvideo_click(item.id)"
                    :class="{playcur : playcur == item.id}">

                    <img src="@/assets/img/playing.gif" width="18" v-if="playcur == item.id">
                    <i class="iconfont icon-bofang2" v-else></i>

                    <div class="title hide-txt">{{item.title}}</div>
                    <div class="time">{{item.videoTime}}</div>
                  </a>
                  <!-- </el-tooltip> -->

                </li>
              </ul>
            </div>

          </div>

        </el-scrollbar>

      </div>

    </div>

  </div>

  <div v-else>
    <el-empty :image-size="200" :description="msg" v-if="empty"></el-empty>
  </div>

</template>

<script>
  import appHeader from "@/components/Header";
  import { useRoute,useRouter } from 'vue-router'
  import { getVideo, getPlayList, classlog } from "@/api/study";
  import { toRefs, reactive, onMounted, ref, onUnmounted } from 'vue';

  export default {
    name: "classPlay",
    components: {
      appHeader,
    },
    setup() {
      const route = useRoute()
      const router = useRouter()

      const classid = route.params.classid;
      const videoid = route.params.videoid;

      const state = reactive({
        isAuth: true,
        msg: 0,
        empty: false,
        activeIndex: 1,
        video: {},
        arrVideo: [],
        lessonList: [],

        videoObject: {
          container: '#VideoPlay',
          variable: 'player',
          autoplay: false,
          html5m3u8: true,
          subtitle: false,
          loop: false,
          //loaded: 'loadHandler',//加载播放器后调用的函数
          video: '',
          seek: '0',
          //debug:true,
        },
        playcur: 0,
        logid: 0,
        videoid: 0,
        videopid: 0,
        play_title: '',
        ckPlayer: null,
        playIndex: 0,
        playNextId: 0,
        playNextTitle: 0,
        myautoTime: 5,
        tmProgress: 0,
        timerTxt: null,
        timerPrss: null,
        showAutoBox: false,
        is_duration: true,
        playThisId:route.params.playid
      })

      // 获取视频 待删 MARKET-4168
      // const resVideoData = async () => {
      //   const res = await getVideo(classid, videoid);
      //   if (res.code === 200) {

      //     if (res.data.playtime > 0) {
      //       state.videoObject.seek = res.data.playtime;
      //     }
      //     state.msg = res.message;
      //     if (res.status === -1) {
      //       state.isAuth = false;
      //       state.empty = true;
      //     } else {
      //       state.isAuth = true;
      //     }

      //     state.video = res.data;
      //     state.play_title = res.data.title;
      //     state.videoObject.video = res.data.videourl;
      //     state.playcur = videoid;
      //     state.logid = res.data.logid;
      //     state.videoid = res.data.id;
      //     state.videopid = res.data.it618_pid;
      //   }
      // };
      // resVideoData();


      const goBack = () => {
        router.push('/class/'+classid);
      }

      // 埋点请求
      const postlogData = async (logData) => {
        const getLogdata = state.arrVideo.filter( t=> t.id==state.videoid);
        await classlog(logData,getLogdata[0].logdata);
      }

      // 列表点击切换视频
      const getvideo_click = async (id, replay=0) => {
        state.playThisId = id;
        state.is_duration = false;
        clearInterval(state.timerTxt);
        clearInterval(state.timerPrss);
        state.showAutoBox = false;
        state.ckPlayer.videoClear();
        state.ckPlayer = null;
        document.getElementById("VideoPlay").innerHTML = "";

        setTimeout(function () {
          getvideoDom(id, replay);
          getNextId(id);
          state.videoObject.autoplay = true;
          state.videoObject.seek = 0;
        }, 500);

      }


      /**
        * 封装视频渲染
        * @replay 1=重播
        * @resOne 1=第一次进入页面播放
      **/
      const getvideoDom = async (id, replay=0, resOne=0) => {

        // 获取视频
        const res = await getVideo(classid, id);
        if (res.code === 200) {
          state.playcur = id;
          state.video = res.data;
          state.play_title = res.data.title;
          state.videoObject.video = res.data.videourl;
          state.arrVideo.push(res.data);

          if (res.data.playtime > 0) {
            state.videoObject.seek = res.data.playtime;
          }
          if (replay == 1) {
            state.videoObject.seek = 0;
          }
          state.msg = res.message;
          if (res.status === -1) {
            state.isAuth = false;
            state.empty = true;
          } else {
            state.isAuth = true;
          }
        }

        // 实例化播放器        
        state.ckPlayer = new ckplayer(state.videoObject);

        // 开启duration计时器
        state.is_duration = true;

        // 监听播放时间
        state.ckPlayer.addListener('time', timeHandler);
        function timeHandler(t) {
          let tm = parseInt(t);
          localStorage.setItem(id + '_playTime', tm);
        }

        // 监听播放和暂停 实现计时功能
        state.ckPlayer.addListener('play', playHandler);
        function playHandler() {
          myCounter.startCount();
        }

        // 监听空格
        state.ckPlayer.addListener('pause', pauseHandler);
        function pauseHandler() {
          myCounter.stopCount();
        }

        // 监听播放结束
        state.ckPlayer.addListener('ended', endedHandler);
        function endedHandler() {
          myCounter.stopCount();
          // funAutoPlay();
          state.showAutoBox = true;
        }

        //自定义计时器
        const myCounter = (function () {
          var step = 0;
          var intervalId = null;
          function count() {
            localStorage.setItem(id + '_duration', parseInt(step));

            step = step + 1;
            // 通过状态改变来关闭计时器
            if (state.is_duration === false) {
              clearInterval(intervalId);
              intervalId = null;
              //console.log('count',state.is_duration);
            }
          }
          function start() {
            if (intervalId == null) {
              count();
              intervalId = setInterval(count, 1000);
            }
          }

          function stop() {
            clearInterval(intervalId);
            intervalId = null;
          }
          return { startCount: start, stopCount: stop }
        })()


        // 如果没播放权限清除视频
        if (state.isAuth === false) {
          state.ckPlayer.videoClear();
          state.ckPlayer = null;
          document.getElementById("VideoPlay").innerHTML = "";
        }

        // 发送埋点 切换视频发送 第一次播放不发送
        let get_duration = localStorage.getItem(state.videoid + '_duration');
        if(resOne !=1 && get_duration){
          let logData = {
            logid: state.logid,
            pytime: localStorage.getItem(state.videoid + '_playTime'),
            duration: localStorage.getItem(state.videoid + '_duration'),
            videoid: state.videoid,
          }
          postlogData(logData);
        }

        // 重置新id
        state.logid = res.data.logid;
        state.videoid = res.data.id;
        console.log('videoid',state.videoid);

        // 修改路由
        let winState = { url: id };
        window.history.pushState(winState, '', id);
        return state;
      }

      // 播放列表
      const resLessonList = async () => {
        const res = await getPlayList(classid);
        if (res.code === 200) {
          state.lessonList = res.data;
          state.msg = res.message;
          // 下一个视频id
          getNextId(videoid);
          if (res.data.videoClassName) {
            state.video.videoClassName = res.data.videoClassName;
            state.videopid = res.data.pid;
          }

          if (res.status === -1) {
            state.isAuth = false;
            state.empty = true;
          } else {
            state.isAuth = true;
          }
        }
      };
      resLessonList();

      // 返回下标下输出一个id
      const getNextId = async (id) => {
        state.lessonList.forEach((item, parent) => {
          state.lessonList[parent].video.forEach((item, child) => {
            if (item.id == id) {
              if (state.lessonList[parent].video.length == child + 1) {
                getNextIdarr(parent + 1, 0)
              } else {
                getNextIdarr(parent, child + 1)
              }
            }
          });
        });

      };

      // 查找下一个视频
      const getNextIdarr = async (parent, child) => {
        //console.log(parent, child);
        state.lessonList.forEach((item, index) => {
          if (index == parent) {
            state.lessonList[index].video.forEach((item, myindex) => {
              if (myindex === child) {
                state.playNextId = item.id;
                state.playNextTitle = item.title;
                //console.log(state.playNextId);
              }
            });
          }
        });
      };


      const myscroll = ref(null);

      onMounted(() => {
        var new_element = document.createElement("script");
        new_element.setAttribute("type", "text/javascript");
        new_element.setAttribute("src", "/js/ckplayerX2/ckplayer.min.js");
        document.body.appendChild(new_element);

        // 第一个视频的渲染 第一个视频不发送时长埋点
        getvideoDom(videoid, 0, 1);

        setTimeout(function () {
          // 滚动条自动定位
          let playcur = document.getElementsByClassName("playcur")[0] || 0;
          let gettop = playcur.offsetTop;
          myscroll.value.wrap.scrollTop = gettop - 200;
        }, 1000);


        window.onbeforeunload = function () {
          // 定义对象
          let logData = {
            logid: state.video.logid,
            pytime: localStorage.getItem(state.videoid + '_playTime'),
            duration: localStorage.getItem(state.videoid + '_duration'),
            videoid: state.videoid,
          }
          postlogData(logData);
        }

        // 监听a点击执行埋点
        var tbody = document.getElementById("myheader");
        tbody.onclick = function (e) {
          myaddEvent(e);
        }
        var videolista = document.getElementById("videoList");
        videolista.onclick = function (e) {
          myaddEvent(e);
        }
        function myaddEvent(e) {
          e = e || event;
          var target = e.target || e.srcElement.href;
          e.preventDefault();
          if (target.tagName == 'A') {
            //console.log(target.href);
            // 定义对象
            let logData = {
              logid: state.video.logid,
              pytime: localStorage.getItem(state.videoid + '_playTime'),
              duration: localStorage.getItem(state.videoid + '_duration'),
              videoid: state.videoid,
            }
            // 发送埋单请求
            postlogData(logData);
            setTimeout("top.location.href = '" + target.href + "'", 100);
          }
        }

      })


      onUnmounted(() => {
        // 定义对象
        let logData = {
          logid: state.video.logid,
          pytime: localStorage.getItem(state.videoid + '_playTime'),
          duration: localStorage.getItem(state.videoid + '_duration'),
          videoid: state.videoid,
        }
        postlogData(logData);
      })


      return {
        ...toRefs(state),
        classid,
        videoid,
        getvideoDom,
        getvideo_click,
        myscroll,
        goBack,
      }
    }
  }
</script>

<style lang="scss" scoped>
  html,
  body {
    overflow-y: hidden;
  }

  .autotime {
    position: absolute;
    z-index: 82;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: rgb(0, 0, 0, .7);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    z-index: 900;
  }

  .pssbox {
    height: 100%;

    .pos-box {
      margin-top: 52px;
    }

    .txt {
      color: #fff;
      font-size: 24px;
      padding-bottom: 24px;
    }

    .txt_next{
      color: #fff;
      font-size: 16px;
      margin-bottom: 36px;
    }

    .sel_btn_box{
      width: 310px;
      margin: 0 auto;
      .btn_sty{
        width: 46%;
        height: 40px;
        line-height: 40px;
        color: #fff;
        text-align: center;
        font-size: 16px;
        border: 1px solid #fff;
        border-radius: 6px;
        cursor: pointer;
        &:hover {
          background-color: #0082fc;
          border: 1px solid #0082fc;
        }
      }
    }

    .clbtn {
      cursor: pointer;
      color: #fff;
      padding-top: 14px;
    }

    .clbtn:hover {
      color: #0082fc;
    }
  }

  .autotime-value {
    width: 70px;
    height: 70px;
    border-radius: 100px;
    margin-left: 5px;
    font-size: 22px;
    color: #fff;
  }

  .nullData {
    position: absolute;
    z-index: 82;
    color: #b3c1d3;
    font-size: 24px;
    width: 100%;
    text-align: center;
  }

  .status_1,
  .status_2,
  .status_3 {
    padding: 0 10px 0 4px;
  }

  .status_1 {
    color: #FF3C23;
  }

  .status_2 {
    color: #67C23A;
  }

  .status_3 {
    color: #0082fc;
  }

  .main {
    position: absolute;
    top: 118px;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #000;
  }

  .mbox {
    position: relative;
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
  }


  .videoBox {
    position: absolute;
    left: 0;
    width: 80%;
    height: 100%;
  }

  .viewtil {
    color: #fff;
    font-size: 18px;
    padding: 16px 20px;
  }

  .navbox {
    position: absolute;
    right: 0;
    width: 20%;
    height: 100%;
    overflow: hidden;
    background-color: #0f0f0f;
  }


  .classtil {

    font-size: 22px;
    color: #eee;
    background-color: #000;
    padding: 14px 20px 0 20px;
    font-weight: 600;

    a {
      color: #eee;
    }

    a:hover {
      color: #0082fc;
    }
  }

  .cate {
    color: #eee;
    padding: 14px 20px;
    border-bottom: 1px solid #333;
    background-color: #000;

    span {
      padding-left: 6px;
    }
  }

  .looplist {
    padding: 0 20px;

    .otile {
      padding: 16px 0 4px;
      font-size: 15px;
      font-weight: 600;
      color: #8496ab;
    }



    .item {
      font-size: 14px;
      color: #617288;

      a {
        padding: 10px 0;
        width: 100%;
        color: #617288;

        .title {
          padding-left: 6px;
          width: 80%;
        }

        .time {
          margin-left: auto;
        }
      }

      a:hover {
        color: #0082fc;
      }

      .playcur {
        color: #0082fc;
      }

      .playing {
        width: 16px;
        height: 16px;
      }


    }
  }

  .goback {
    display: inline-block;
    font-size: 15px;
    color: #b3c1d3;
    padding: 4px 20px;
    border-radius: 100px;
    background-color: #465266;
    color: #fff;
  }

  .goback:hover {
    background-color: #617288;
  }
</style>

<style>
  .el-scrollbar__bar.is-vertical {
    width: 8px;
  }

  .el-scrollbar__thumb {
    background-color: #617288;
  }

  .el-page-header__content {
    color: #fff;
  }

  .el-page-header__left:hover {
    color: #0082fc;
  }
</style>