<template>
    <div class="info">
      <div class="container">
        <div class="play">
          <el-row>
            <el-col :span="24">
              <video-player
                id="video"
                class="video-player vjs-custom-skin"
                ref="videoPlayer"
                @ended="videoEnded"
              @timeupdate="videoTimeUp"
              @loadeddata="videoLoaded"
              @seeking="videoSeeking"
              @seeked="videoSeeked"
                :events="['seeking', 'seeked']"
                :playsinline="true"
                :options="playerOptions"
              ></video-player>
              <!-- <h3 id="text-progress">{{ this.progress }}</h3> -->
            </el-col>
            <!-- <el-col :span="6" class="text"> -->
            <!-- </el-col> -->
          </el-row>
        </div>
      </div>
    </div>
  </template>  
  
  <script>
  import Vue from 'vue'
  import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
Vue.use(VideoPlayer)
  export default  {
    data() {
    return {
            classHour : [],
            data : [],
            userId :'',
            videoInformation : [],
            progress : '0.00%',
            durationTime : '' ,// 视频总时常
            currentTime : '' ,// 当前播放进度时长
            saveDurationTime : '', // 视频总时常
            saveCurrentTime:'', // 当前播放进度时长
            isShowSubs: false,
            recodrTime :null,
            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', //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                    src: 'http://vjs.zencdn.net/v/oceans.mp4' //url地址
                    }
                ],
                poster: '', //你的封面地址
                // width: document.documentElement.clientWidth, //播放器宽度
                notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true,
                    durationDisplay: true,
                    remainingTimeDisplay: false,
                    fullscreenToggle: true //全屏按钮
                }
            }
        }
    },
    created() {
    },
    methods: {
    // 视频信息加载完成，获取总时长，若接口返回进度，断点播放
    videoLoaded(item) {
      this.durationTime = item.cache_.duration
      this.videoInformation = item
      // console.log('progress', this.progress)
      if (this.progress > '0.00%') {
        item.currentTime(Number(this.currentTime))
      }
      // console.log('视频信息videoLoaded：', this.videoInformation)
    },
    // 当前播放进度
    videoTimeUp(item) {
      this.currentTime = item.cache_.currentTime
      this.progress = ((this.currentTime.toFixed(2) / item.cache_.duration.toFixed(2)) * 100).toFixed(2) + '%'
      // console.log('当前播放进度', item)
    },
    // 正在拖动
    videoSeeking(item) {
      // console.log('正在拖动',item)
      this.isSeeking = true
    },
    // 拖动结束
    videoSeeked(item) {
      // console.log('拖动结束',item)
      this.isSeeking = false
    },
  
    // 点击播放
    videoPlay() {
      //清除定时器
      if (this.pauseTimer) {
        clearTimeout(this.pauseTimer)
      }
    },
    // 触发暂停
    videoPause(item) {
      //利用定时器延迟
      this.pauseTimer = setTimeout(() => {
        if (this.isVideoEnd) return
        if (this.isSeeking) return
        // 展示蒙层
        this.isShowSubs = true
      }, 100)
    },
    // 播放结束
    videoEnded() {
      this.isVideoEnd = true
    }
  }
  }
  </script>
  <style lang="scss" scoped>
  $width: 1140px;
  .info {
    width: 100%;
  }
  .container {
    width: $width;
    margin: auto;
    .breadcrumb {
      padding-top: 20px;
      padding-bottom: 20px;
    }
    .play {
      box-shadow: 0 4px 8px 0 rgba(28, 31, 33, 0.1);
      background-color: #26262b;
      .text {
        font-size: 15px;
        color: #fff;
        text-align: left;
        .title {
          padding: 12px 15px;
        }
        .teacher {
          padding: 12px 0 12px 10px;
          background: #2d2d2d;
        }
        .list {
          height: 393px;
          width: 283px;
          .name1 {
            cursor: pointer;
            background: #2d2d2d;
            font-size: 15px;
            padding: 10px 0 10px 47px;
            margin-top: 2px;
          }
          .name2 {
            cursor: pointer;
            color: rgb(61, 231, 112);
            background: #2d2d2d;
            font-size: 15px;
            padding: 10px 0 10px 47px;
            margin-top: 2px;
          }
        }
      }
    }
   // .biref {
   //   box-shadow: 0 4px 8px 0 rgba(28, 31, 33, 0.1);
   //   background-color: #ffffff;
   //   font-size: 15px;
   //   text-align: left;
   //   color: #5e5e5e;
   //   padding: 25px 20px;
   //   margin: 30px 0;
    //  img {
    //    vertical-align: middle;
   //     margin-right: 5px;
   //   }
   // }
 }
  </style>
  <style>
  body {
    background-color: #f7f9fc !important;
    /* background-color: #d7e4f7 !important; */
  }
  .vjs-custom-skin > .video-js .vjs-big-play-button {
    width: 70px;
    border-radius: 50%;
  }
  .el-breadcrumb__inner {
    color: #2c3e50 !important;
  }
  .el-scrollbar__wrap {
    overflow: hidden;
    position: relative;
  }
  </style>