Vue2项目视频控件大全，亲测有效

HTML部分

<div class="fl">
        <div class="video-box">
          <div v-for="(video, index) in videoList" :key="index">
            <video
              style="width: 100%; height: 300px"
              :id="'video' + index"
              ref="videoElement"
              controls
              autoplay
              muted
            ></video>
          </div>
        </div>
        <div style="display: flex; width: 1000px" class="mt">
          <el-button @click="playOrPauseBtn">
            <i class="el-icon-video-play" v-if="playOrPause">播放</i>
            <i class="el-icon-video-pause" v-else>暂停</i>
          </el-button>
          <el-button @click="backTwentySeconds">后退20秒</el-button>
          <el-button @click="backTenSeconds">后退10秒</el-button>
          <el-button @click="backFiveSeconds">后退5秒</el-button>
          <el-button @click="slowPlayback">减速播放</el-button>
          <el-button @click="oneXSpeed">1X</el-button>
          <el-button @click="twoXSpeed">2X</el-button>
          <el-button @click="threeXSpeed">3X</el-button>
          <el-button @click="fourXSpeed">4X</el-button>
          <el-button @click="fiveXSpeed">5X</el-button>
          <el-button @click="sixXSpeed">6X</el-button>
          <el-button @click="sevenXSpeed">7X</el-button>
          <el-button @click="eightXSpeed">8X</el-button>
        </div>
      </div>

script部分

data(){
          return {
              playOrPause: false,
          }
      }
      mounted(){
              setInterval(() => {
      this.playcomplete();
    }, 5000);
      }
      methods:{
             //播放或暂停
    playOrPauseBtn() {
      const videoElement = this.$refs.videoElement;
      console.log(this.playOrPause);
      if (this.playOrPause) {
        videoElement.forEach((v) => {
          v.play();
        });
        this.playOrPause = !this.playOrPause;
      } else {
        videoElement.forEach((v) => {
          v.pause();
        });
        this.playOrPause = !this.playOrPause;
      }
    },
    // 后退20秒
    backTwentySeconds() {
      const videoElement = this.$refs.videoElement;
      videoElement.forEach((v) => {
        v.currentTime -= 20;
      });
    },
    // 后退10秒
    backTenSeconds() {
      const videoElement = this.$refs.videoElement;
      videoElement.forEach((v) => {
        v.currentTime -= 10;
      });
    },

    // 后退5秒
    backFiveSeconds() {
      const videoElement = this.$refs.videoElement;
      videoElement.forEach((v) => {
        v.currentTime -= 5;
      });
    },
     //同步播放
    simulcast() {
      const videoElement = this.$refs.videoElement;
      videoElement[0].currentTime = videoElement[1].currentTime;
    },
      //判断是否播放完毕
    playcomplete() {
      // debugger;
      const videoElement = this.$refs.videoElement;
      videoElement.forEach((v) => {
        if (v.currentTime >= v.duration) {
          //  this.videoEnd = true;
          this.playOrPause = true;
          console.log("播放完毕");
         
        } else if (v.currentTime >= v.duration && this.playOrPause) {
          this.playOrPause = false;
          // this.videoEnd = false;
          console.log("播放中");
        }
      });
    },
    //减速播放
    slowPlayback() {
      const videoElement = this.$refs.videoElement;
      videoElement.forEach((v) => {
        if (v.playbackRate * 10 > 2) {
          v.playbackRate = (v.playbackRate * 10 - 2) / 10;
        }
      });
    },

    //1X
    oneXSpeed() {
      const videoElement = this.$refs.videoElement;
      videoElement.forEach((v) => {
        v.playbackRate = 1;
      });
    },
    //2X
    twoXSpeed() {
      const videoElement = this.$refs.videoElement;
      videoElement.forEach((v) => {
        v.playbackRate = 2;
      });
    },
    //3X
    threeXSpeed() {
      const videoElement = this.$refs.videoElement;
      videoElement.forEach((v) => {
        v.playbackRate = 3;
      });
    },
    //4X
    fourXSpeed() {
      const videoElement = this.$refs.videoElement;
      videoElement.forEach((v) => {
        v.playbackRate = 4;
      });
    },
    //5X
    fiveXSpeed() {
      const videoElement = this.$refs.videoElement;
      videoElement.forEach((v) => {
        v.playbackRate = 5;
      });
    },
    // 6X
    sixXSpeed() {
      const videoElement = this.$refs.videoElement;
      videoElement.forEach((v) => {
        v.playbackRate = 6;
      });
    },
    // 7X
    sevenXSpeed() {
      const videoElement = this.$refs.videoElement;
      videoElement.forEach((v) => {
        v.playbackRate = 7;
      });
    },
    // 8X
    eightXSpeed() {
      const videoElement = this.$refs.videoElement;
      videoElement.forEach((v) => {
        v.playbackRate = 8;
      });
    },
      }