前端video标签实现视频剩余播放时间、倍速、前进后退

概要

新项目是有关教学方面的，所以用到了视频方面的知识，简单的暂停播放我就不说了，菜鸟教程那边已经很详细了，我这边主要是用到了一个视频剩余播放时间、倍速、前进后退功能。代码我就放在一起了，供大家参考

模板部分

<div class="video-box">
  <div style="position: relative;" v-for="(item, index) in videoList" :key="index">
    <video style="width: 100%; height: 350px" :id="'video' + index" ref="videoElement" :src="item.pic"
      controls autoplay preload></video>
    <div style="position: absolute;top: 10px;right: 10px;">剩余时间：{{ endtime[index] }}</div>
  </div>
    <el-button size="mini" type="primary" @click="backTwentySeconds()">后退20秒</el-button>
    <el-button size="mini" type="primary" @click="twoXSpeed()">2X</el-button>
</div>

数据源

data() {
    return {
		endtime: ['00:00', '00:00'],//剩余时间
		videoList: [],//视频播放链接,因为我这边是多个视频播放，所以是数组，上面video也是遍历渲染，下面也是遍历获取视频DOM信息
	}
}

生命周期部分

mounted() {
    // 因为视频还没加载完成获取不到DOM所以等待了100毫秒
    setTimeout(() => {
      const videoDoms = this.$refs.videoElement;
      // 循环处理每个视频元素
      for (let i = 0; i < videoDoms.length; i++) {
        videoDoms[i].addEventListener('loadedmetadata', () => {
          // 视频加载完成后，获取总时长
          const totalDuration = videoDoms[i].duration;
          this.formatTime(i, totalDuration);//计算刚开始的剩余时长
          // 监听播放时间更新事件
          videoDoms[i].addEventListener('timeupdate', () => {
            // 获取当前播放时间
            const currentTime = videoDoms[i].currentTime;

            // 计算剩余播放时间
            const remainingTime = totalDuration - currentTime;

            // 输出剩余播放时间
            // console.log(`第 ${i} 个剩余时间:`, remainingTime);
            this.formatTime(i, remainingTime);
          });
        });
      }
    }, 100); // 等待 100 毫秒

},
 methods: {
    //将剩余时长转化成分钟秒的形式24:33，24分钟33秒
    formatTime(idx, seconds) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = Math.floor(seconds % 60);
      const formattedMinutes = String(minutes).padStart(2, '0');
      const formattedSeconds = String(remainingSeconds).padStart(2, '0');
      // this.endtime[idx] = `${formattedMinutes}:${formattedSeconds}`
      //因为是通过数组下标来修改的，但是由于vue2特性监听不到数组的变化，所以需要用$set方法
      this.$set(this.endtime, idx, `${formattedMinutes}:${formattedSeconds}`);
    },
    //倍速把下面的2改成对应的倍数就可以了
    twoXSpeed() {
      const videoElement = this.$refs.videoElement;
      videoElement.forEach((v) => {
        v.playbackRate = 2;
      });
    },
    // 后退20秒，前进的话同理把-=变成+=就可以了
    backTwentySeconds() {
      const videoElement = this.$refs.videoElement;
      videoElement.forEach((v) => {
        v.currentTime -= 20;
      });
    },
}

小结

工作好累，想摸鱼。