gdy_app_8/src/view/course/video/freeVideo.vue

<template>
    <div class="page">
      <van-nav-bar
        :title="title"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      ></van-nav-bar>
      <div class="courseContent">
        <div class="previewImg">
          <video ref="vueMiniPlayer" :src="videoSrc" controls autoplay v-if="showVideo" controlsList="nodownload"></video>
        </div>
        <div class="title">
          <p>{{ video_info.name }}</p>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import {learnerCourseDetail,getFreeVideoSrc} from '../api'
  export default {
    name: "video",
    data() {
      return {
        video_info:{
            name:'免费课程'
        },
        showVideo:true,
        title: "免费课程",
        videoSrc:"",
        courseDetail: {
          thumb: "",
          name: "",
          images: [],
          sections: []
        }
      };
    },
    watch:{
      videoSrc(){
        this.showVideo = false;
        this.$nextTick(()=>{
          this.showVideo = true;
          this.$nextTick(()=>{
            this.$refs.vueMiniPlayer.play();//播放
          })
        })
      }
    },
    created() {
      this.init();
    },
    methods: {
      // 章节切换获取视频地址
      toSectionVidio(item,i) {
        this.courseDetail.sections.forEach((item,index)=>{
          item.active = false;
          if(index == i){
            item.active = true;
          }
        })
        let data = {
            index: i,
            link: item.link
        };
        sessionStorage.setItem('vd_info',JSON.stringify(data))
        this.getVideoLink(item.link)
        // this.videoSrc = this.courseDetail.sections[index].link
      },
      // 获取视频地址
      getVideoLink(link){
        let data = {
          subjectId:this.$route.params.id,
          link:link
        }
        getFreeVideoSrc(data).then(res=>{
          this.videoSrc = res
        }).catch(err=>{
          this.$router.push('/courseError')
        })
      },
      // 返回
      onClickLeft() {
        this.$router.go(-1);
      },
      // 初始化
      init() {
        if(this.$route.query){
            this.video_info = this.$route.query;
            this.getVideoLink(this.video_info.link)
        }else{
            this.$toast.fail('视频似乎有点问题')
            setTimeout(() => {
                this.$router.go(-1)
            }, 2000);
        }
      },
    },
  };
  </script>
  <style scoped lang="scss">
  @import url('../utils/navBar.scss');
  * {
    margin: 0;
    padding: 0;
  }
  img {
    display: block;
  }
  .page {
    background-color: #fff;
    box-sizing: border-box;
    .courseContent {
      padding: 0 0.2rem;
      margin-top: 0.3rem;
      .previewImg {
        border-radius: 0.1rem;
        overflow: hidden;
        width: 100%;
        height: 4rem;
        video {
          width: 100%;
          height: 4rem;
        }
      }
      .title {
        p {
          font-size: 0.32rem;
          font-weight: 600;
          color: #000;
          line-height: 1rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: break-all;
        }
      }
      .tabs {
        height: calc(100vh - 6.25rem);
        position: relative;
        .images {
          margin-top: 0.1rem;
          img {
            width: 100%;
          }
        }
        .catelog {
          margin-top: 1px;
          border-top: 1px solid #efefef;
          .sup {
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
              font-size: 0.24rem;
              color: #666;
              line-height: 3;
            }
          }
          .logConetent {
            .logLi {
              border: 1px solid #efefef;
              border-radius: 0.1rem;
              padding: 0 0.2rem;
              margin-bottom: 0.15rem;
              p {
                padding: .2rem 0;
                font-size: 0.3rem;
                color: #000;
                line-height: 1.3;
                // overflow: hidden;
                // text-overflow: ellipsis;
                // white-space: nowrap;
                // word-break: break-all;
              }
              &.active{
                box-shadow: 1px 4px #ddd;
                p{
                  color: #26A2FF;
                }
              }
            }
          }
        }
      }
    }
    .getCourse {
      position: absolute;
      bottom: 0.1rem;
      left: 0.1rem;
      width: calc(100% - 0.2rem);
      .getBtn {
        width: 100%;
        background-color: #26A2FF;
        color: #fff;
        // animation: getFire 3s infinite linear;
        border-radius: .1rem;
      }
    }
  }
  @keyframes getFire {
    0% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1.05);
    }
  }
  </style>