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

第一字段处

第二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

width="100%"

height="100%"

:src=videourl

controls="controls"

ref="video"

autoplay

>