第一字段处
<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
<videowidth="100%"height="100%":src=videourlcontrols="controls"ref="video"autoplay ></video>
)