<template>
    <div class="video-page">
        <div class="header-box">
            <div class="headers">
                <van-nav-bar @click-left="onClickLeft" >
                        <img class="img" src="../../assets/img/back@2x.png" slot="left" alt="">
                </van-nav-bar>
            </div>
            <div class="video-box">
                <video-player v-if="playerOptions.sources[0].src"  class="video-player vjs-custom-skin"
                        ref="videoPlayer"
                        :playsinline="true"
                        :options="playerOptions"
                        @play="onPlayerPlay($event)"
                        @pause="onPlayerPause($event)"
                >
                </video-player>
            </div>
        </div>
        
        <div class="content-box">
            <div class="jianjie borders clearfix" @click="show_shadow">
                <div class="L f-l">
                    <div class="tit">{{videos_detail.videoName}}</div>
                    <div class="content">{{ videos_detail.videoSubName}}</div>
                </div>
                <div class="R f-r">
                    <div>简介</div>
                    <div class="arrow"></div>
                </div>
            </div>
            <div class="xuanji borders">选集</div>
            <div class="collection">
                <div :class="{item:true, bg_color:isactive===index}" v-for="(item,index) in lists" :key="index" @click="players(item, index)">
                    <span>{{ index + 1 }}</span>
                </div>
                
            </div>
           
        </div>
        <van-popup class="shadow" v-model="show" position="bottom" :overlay="true">
            <div class="details">
                <div class="close" @click="hide_shadow"></div>
                <div class="lists-box">
                    
                    <div class="jianjie">
                        <div class="tit">课程简介：</div>
                        <div class="cont" v-html="videos_detail.videoBrief"></div>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>
<style lang="less" scoped>
.video-page {
  position: relative;
  height: 100vh;
  .header-box {
    position: relative;
    height: 422px;
    .headers {
      padding-top: 57px;
      margin: 0 44px;
      /deep/ .van-hairline--bottom {
        background: transparent;
        color: #fff;
        height: 55px;
        line-height: 55px;
      }
      /deep/ .van-nav-bar__left {
        top: 0;
      }
      /deep/ .van-nav-bar__title {
        font-size: 36px;
      }
      /deep/ .van-hairline--bottom::after {
        border: none;
      }
      .img {
        width: 55px;
        height: 55px;
      }
    }
    .video-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      /deep/ .vjs-volume-panel-horizontal {
        display: none;
      }
      /deep/ .vjs-current-time {
        display: none;
      }
      /deep/ .vjs-time-divider {
        display: none;
      }
      /deep/ .vjs-duration {
        display: none;
      }
      /deep/ .vjs-button > .vjs-icon-placeholder:before {
        font-size: 45px;
        line-height: inherit;
        position: static;
      }
      /deep/ .vjs-custom-skin > .video-js .vjs-play-progress,
      .vjs-custom-skin > .video-js .vjs-volume-level {
        background: #80efb7;
      }
    }
  }

  .content-box {
    position: relative;
    margin: 40px 30px 0 30px;
    .borders {
      border-bottom: 1px solid #eee;
    }
    .jianjie {
      height: 100px;
      line-height: 40px;
      text-align: left;

      .L {
        width: 400px;
        .tit {
          font-size: 30px;
          color: #2b4168;
        }
        .content {
          font-size: 26px;
          color: #aca9a9;
        }
      }
      .R {
        display: flex;
        justify-content: flex-start;

        .arrow {
          margin-left: 15px;
          width: 22px;
          height: 39px;
          background: url(../../assets/img/me_arrow_r.png) no-repeat center;
          background-size: cover;
        }
      }
    }
    .xuanji {
      font-size: 30px;
      color: #2b4168;
      height: 75px;
      line-height: 75px;
      text-align: left;
    }
    .collection {
      position: relative;
      margin-top: 40px;
      font-size: 0;
      text-align: left;
      .item {
        width: 86px;
        text-align: center;
        height: 86px;
        border: 2px solid #ccc;
        border-radius: 50%;
        color: #ccc;
        line-height: 86px;
        font-size: 36px;
        display: inline-block;
        margin-left: 25px;
        margin-bottom: 20px;
      }
      .bg_color{
        background: #80efb7;
      }
    }
  }
  .shadow {
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    overflow: hidden;
    .details {
      height: 813px;
      position: relative;
      .close{
          position: absolute;
          top:40px;
          left:664px;
          width: 43px;
          height: 48px;
          background: url(../../assets/img/video_close.png) no-repeat center;
          background-size: cover;
          z-index: 9999;
      }
      .lists-box{
          padding-top: 120px;
          margin:0px 52px 0 22px;
          font-size: 26px;
          overflow: hidden;
          .item{
              display: flex;
              justify-content: flex-start;
              align-items: center;
              height: 60px;
              margin-bottom: 20px;
               text-align:left;
               color:#435475;
              .item-L{
                  width:130px;
                   
              }
              .item-R{
                  color:#70B9E5;
                  
              }
          }
          .jianjie{
              text-align: left ;
              .tit{
                  line-height: 90px;
                  color:#2b4168;

              }
              .cont{
                  color: #70B9E5;
                  line-height: 40px;
              }
          }
      }
    }
  }
}
</style>

<script>
export default {
  name: "video_detail",
  data() {
    return {
      isactive:0,
      show: false,
      playerOptions: {
        //       playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4",
            src: "" //你的视频地址（必填）
          }
        ],
        poster: "poster.jpg", //你的封面地址
        width: document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂无法播放，请稍后再试" //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        //        controlBar: {
        //          timeDivider: true,
        //          durationDisplay: true,
        //          remainingTimeDisplay: false,
        //          fullscreenToggle: true  //全屏按钮
        //        }
      },
      lists:[],
      videos_detail:{}
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onPlayerPlay(player) {
      //alert("play");
    },
    onPlayerPause(player) {
      //alert("pause");
    },
    show_shadow(){
        this.show=true;
    },
    hide_shadow () {
        this.show = false;
    },
    players (item, index){
      console.log(item.videoUrl);
      this.isactive = index;
      this.playerOptions.sources[0].src = item.videoUrl
    }
  },

  mounted () {
    
    let ids = this.$route.params.id;
    let params = {
      action : "get_video_detail",
      videoId : ids,
    }
    let lists_methods = this._domain.video_detail("post", params);
    this._domain.ajax([lists_methods])
    .then(res=>{
      console.log(res);
      let _data = res[0];
      if(_data._code !="99999"){
        Toast({
          messages: _data._msg,
          duration:2500,

        });
        return;
      };
      this.lists = _data._result.videoSubs;
      this.videos_detail = _data._result;
      //初始化视频地址
      this.playerOptions.sources[0].src = _data._result.videoSubs[0].videoUrl;
      console.log(this.playerOptions.sources[0].src);
      console.log( _data._result)
    })
  }
};
</script>

详细参考地址vue-video-player
https://github.com/surmon-china/vue-video-player