第一字段處

?<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>