vue 组件 videojs 播放器

<template>
  <div
    v-show="videoSource.playUrl"
    id="player-wrap"
  >
    <div id="player-vjs-wrap">
      <video
        id="player"
        class="video-js vjs-big-play-centered vjs-16-9"
        controls
        playsinline
        webkit-playsinline
        x5-playsinline
        poster=""
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'PlayerWrap',
  props: {
    videoSource: { //视频源地址
      type: Object,
      default() {
        return {};
      }
    },
    curProgress: {//初始播放位置（进度）
      type: Number,
      default:0
    }
  },
  data() {
    return {
      player: null
    };
  },
  watch: {
    videoSource: {
      handler(val, oldval) {
        var data = [
          {
            src: val.playUrl,
            type: 'video/mp4'
          }
        ];
        //切换播放源时告知原视频播放进度
        var percent = this.getCurProgress()
        this.$emit('playToggle', percent);
        
        this.player.src(data);
        this.player.load(data);
      },
      deep: true //开启深度监听
    }
  },
  mounted: function() {
    // pc端视频区禁止鼠标右键点击
    document.getElementById('player-wrap').oncontextmenu = function() {
      return false;
    };
    this.initPlayer('player');
  },
  beforeDestroy: function() {
    // 组件销毁时，清除播放器
    if (this.player) {
      this.player.dispose();
      this.player = null;
    }
  },
  methods: {
    initPlayer(domId, lang) {
      //this.setVideoPlayerLang(lang);
      //videojs.options.flash.swf = '../../../videojs/video-js.swf';
      this.player = videojs(domId, {
        autoplay: true,
        muted: true,
        playbackRates: [1, 1.25, 1.5, 2, 3],
        children: {
          mediaLoader: true,
          posterImage: true,
          loadingSpinner: true,
          bigPlayButton: true,
          controlBar: {
            children: {
              playToggle: true,
              currentTimeDisplay: true,
              timeDivider: true,
              durationDisplay: true,
              progressControl: true,
              customControlSpacer: true,
              volumePanel: {inline: false},
              playbackRateMenuButton: true,
              fullscreenToggle: true
            }
          },
          errorDisplay: true
        },
        sources: [
          {
            src: this.videoSource.playUrl,
            type: 'video/mp4'
          }
        ]
      });
      this.initPlayerEvent();
    },
    setVideoPlayerLang(lang) {
      var video_i18n = lang ? 'lang' : 'zh-CN';
      videojs.addLanguage(video_i18n, LANG_VIDEO[i18n]);
    },
    initPlayerEvent() {
      this.onPlayerError();
      this.onPlayerPlay();
      this.onPlayerPause()
      this.onPlayerEnded();
      this.onProgressChange();
      this.onLoadedMetadata()
    },
    //播放失败
    onPlayerError() {
      var _this = this;
      this.player.on('error', function() {
        _this.$emit('playError');
        //console.log('player error', errCode);
      });
    },
    //播放成功
    onPlayerPlay() {
      var _this = this;
      this.player.on('playing', function() {
        _this.$emit('playPlaying');
        //console.log('player playing');
      });
    },
    //播放暂停
    onPlayerPause() {
      var _this = this;
      this.player.on('pause', function() {
         var percent = _this.getCurProgress()
        _this.$emit('playPause', percent);
        //console.log('player playing');
      });
    },
    //播放结束
    onPlayerEnded() {
      var _this = this;
      this.player.on('ended', function() {
        _this.$emit('playEnded');
        //console.log('player ended');
      });
    },
    //实时进度
    onProgressChange() {
      var _this = this;
      this.player.on('timeupdate', function(event) {
        var percent = _this.getCurProgress()
        _this.$emit('playProgress', percent);
        //console.log(percent);
      });
    },
    //设置指定进度
    onLoadedMetadata(){
      var _this = this;
      this.player.on('loadedmetadata', function() {
        //console.log('loadedmetadata-视频源数据加载完成')
        //设置上次播放时间lastLearnTime(秒)
        var duration = this.duration(); //视频时常
        var currentTime = duration*_this.curProgress/100; //当前时间
        this.currentTime(currentTime);
      });
    },
    getCurProgress(){
      var currentTime = this.player.currentTime(); //当前时间
      var duration = this.player.duration(); //视频时常
      var percent = ((currentTime / duration) * 100).toFixed(0);
      return percent
    }
  }
};
</script>

<style>
#player-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #252525;
}
#player-vjs-wrap {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: relative;
  left: 50%;
  top: 50%;
}
</style>