study_sm/src/containers/center/play/components/media.vue

<template>
  <div>
    <video-player
      class="video-player vjs-custom-skin"
      ref="videoPlayer"
      :playsinline="true"
      @pause="onPlayerPause($event)"
      @play="onPlayerStart($event)"
      @timeupdate="onPlayerTimeupdate($event)"
      @ready="playerReadied"
      @ended="onPlayerEnded($event)"
      :globalOptions="{controls:true}"
      :options="options">
    </video-player>

  </div>
</template>

<script>
  import {httpServer} from "@/components/httpServer/httpServer.js";
  import md5 from 'js-md5';
  import {videoPlayer } from 'vue-video-player';
  import 'video.js/dist/video-js.css'
  import { MessageBox } from "element-ui";
  export default {
    name: "Index",
    data() {
      return {
        timer: false,
        tickNum: 0,
        prevTime:0,
        isReady:false,
        onPlay: false
      }
    },
    components: {
      videoPlayer
    },
    watch:{
      dialog( showDilog ){
        if( !showDilog){
          this.doPause()
          this.isReady = false
        }
      }
    },
    props: {
      media:{
        type: Object,
        default: ()=>{
          return {id: '', percent:0}
        }
      },
      dialog:{
        type: Boolean,
        default: true
      },
      options: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer); //关闭
      }
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    created() {
      this.timer = setInterval(this.tick, 5 * 1000);
      // this.startMonitor();
    },
    methods: {
      playerReadied(player) {
        let that = this;
        if( !this.isReady && this.media.position){
          this.setposition( this.media.position );
        }else if (!this.media.position ){
          setTimeout( ()=>{
            that.doPlay()
          }, 1000 )
        }
        this.isReady = true
      },
      onPlayerTimeupdate( player ){
        let myPlayer = this.$refs.videoPlayer.player;
        let curTimes = player.cache_.currentTime;
        if( curTimes>30 && curTimes > this.media.position+15 && !this.media.isFinish){
          console.log("return", curTimes, this.media.position )
          player.currentTime( this.media.position );
          return;
        }
      },
      setposition( position ) {
        if( position > this.media.duration) position = this.media.duration;
        if( !this.media.isFinish ){
          let player = this.$refs.videoPlayer.player;
          player.currentTime( position );
        }
        let player = this.$refs.videoPlayer.player;
        if( this.media.position >= this.media.duration-30 && !this.media.isFinish){
          this.tick( true )
        }
        this.onPlay = true
      },
      onPlayerPause(event) {
        this.onPlay = false
      },
      onPlayerEnded( event ){
        this.tick( true )
      },
      doPause( ){
        let myPlayer = this.$refs.videoPlayer.player;
        myPlayer && myPlayer.pause()
        console.log("doPause", myPlayer)
        this.onPlay = false
      },
      doPlay(){
        if( !this.$refs.videoPlayer || !this.$refs.videoPlayer.player ) return;
        if( !this.dialog ) return this.doPause();
        let myPlayer = this.$refs.videoPlayer.player;
        myPlayer && myPlayer.play()
        this.tickNum = 0
        this.onPlay = true
      },
      onPlayerStart() {
        this.onPlay = true
      },
      startMonitor() {
        let that = this
        window.onblur = function() {
          that.doPause()
        }
        window.onfocus = function () {
          that.doPlay()
        }
      },
      tickWait(){
        this.doPause()
        let that = this
        MessageBox({
          title: "连续学习超15分钟",
          message: "是否继续学习",
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {
              that.doPlay();
              done();
            } else{
              done();
            }
          }
        })
      },
      tick( force = false) {
        let media = this.media;
        this.tickNum ++
        // 已经完成
        if( this.media.isFinish )  return;

        // 主动暂停
        let myPlayer = this.$refs.videoPlayer.player;
        let curTimes = parseInt(myPlayer.currentTime());
        // 后退无心跳
        if( this.media.position > curTimes && !force ) return;
        if( curTimes< 4) return;

        let isFinish = force?1:0
        if( curTimes >= media.duration ) isFinish = 1;

         //  拉到后面
        if( !isFinish ){
          if ( !this.onPlay ) return;
          // if( curTimes < media.position ) return this.setposition(media.position )
        }
        // 强制完成
        let param ={id: media.id, position:curTimes ,isFinish};
        httpServer("course.tick", param, true).then( res => {
          if (res.code == 200) {
            let {skip, position, pause} = res.data
            if( pause ) {
              this.doPause();
              this.$emit("close")
              return
             }
            if( !skip ) this.setposition( position );
            Object.assign(param, res.data )
            this.$emit("update", param )
          }
        }).catch( res =>{
          console.log( "tick", res)
        })
      }
    }
  }
</script>

<style>
  .video-js{
    .vjs-control-bar{
      .vjs-icon-custombutton {
        font-family: VideoJS;
        font-weight: normal;
        font-style: normal;
       }
      .vjs-icon-custombutton:before {
        content: "\f108";
        font-size: 1.8em;
        line-height: 1.67;
      }
    }
  }
  .p-process{
    width: 100%;
    margin:20px auto;
    height: 30px;
  }
</style>