VUE 获取视频时长,无需修改数据库,前提当前查看视频可以得到时长

第一字段处

 <el-table-column label="视频时长" align="center">
        <template slot-scope="scope">
          <span>{{ formatDuration(scope.row.duration) }}</span>
        </template>
      </el-table-column>

第二getlist

  getList() {
        this.loading = true;
             listFiles(this.queryParams).then(response => {
          this.fileList = response.rows.map(item => {
            return {
              ...item,
              duration: 0, // 初始化时长为 0
            };
          });
          this.fileList = response.rows;
          console.log(response)
          this.total = response.total;
          this.loading = false;
          // 加载视频元数据并更新时长
          this.loadVideoDurations();
        });
      },

loadVideoDurations() {
        this.fileList.forEach((item, index) => {
          const video = document.createElement('video');
          video.src = item.videourl;
          video.addEventListener('loadedmetadata', () => {
            // 更新时长（单位为秒）
            this.$set(this.fileList[index], 'duration', video.duration);
          });
        });
      },
      formatDuration(seconds) {
        if (!seconds) return '00:00';
        const minutes = Math.floor(seconds / 60);
        const secs = Math.floor(seconds % 60);
        return `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
      },


点查看直接播放视频 添加autoplay 

<video
        width="100%"
        height="100%"
        :src=videourl
        controls="controls"
        ref="video"
        autoplay
></video>