1.引用video标签

 <video ref="videoPlayer" controls :src=fileUrl :poster=posterUrl controlslist="nodownload" @play="toPlays"
                 @timeupdate="updateTime" @pause = "toPause"
                 :class="[porel,fullwidth,mal,fla,mat,'movie-show-video']"
                 style="width: 100%; height: 100%; object-fit: fill">
</video>

@timeupdate="updateTime" 记录视频播放的时间

updateTime(e){
        this.currentTime = e.target.currentTime
 },

@pause = "toPause" 暂停视频
@play="toPlays" 播放视频

2.通过自定义按钮控制视频播放、暂停、加大音量、减小音量、快进、后退
播放：

<template>
 <li @click="toPlay">播放/暂停</li>
 <li @click="toForward">前进</li>
 <li @click="toBack">倒退</li>
 <li @click="addVoice">增加音量</li>
 <li @click="decrease">减小音量</li>
</template>

<script>
  toPlay(){
        this.$refs.videoPlayer.paused === true ? this.$refs.videoPlayer.play() : this.$refs.videoPlayer.pause();
      },
      toForward(){
        var time = 10; //单位秒，每次增减10秒
        this.$refs.videoPlayer.volume !== this.$refs.videoPlayer.duration ? this.$refs.videoPlayer.currentTime += time : 1;
      },
      toBack(){
        var time = 10;
        console.log('后退')
        this.$refs.videoPlayer.currentTime !== 0 ?  this.$refs.videoPlayer.currentTime -= time : 1;
      },
      addVoice(){
        var vol = 0.1;
        console.log('增加音量')
        this.$refs.videoPlayer.volume !== 1 ? this.$refs.videoPlayer.volume += vol : 1;
      },
      decrease(){
        var vol = 0.1;
        console.log('减小音量')
        this.$refs.videoPlayer.volume !== 0 ? this.$refs.videoPlayer.volume -= vol : 1;
      }
</script>