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

news/2025/2/26 13:52:27

第一字段处

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

http://www.niftyadmin.cn/n/5868797.html

相关文章

编写一个程序,输入一个字符串并输出其长度(Python版)

编写一个程序&#xff0c;输入一个字符串并输出其长度 以下是Python实现代码: s input("请输入一个字符串&#xff1a;") print("字符串的长度是&#xff1a;", len(s))运行效果&#xff1a; 1.程序会等待用户输入&#xff08;如输入"Hello"&…

Vue+ElementPlus的一些问题修复汇总

目录 一、ElementPlusVue-router做侧边栏问题 二、 组件样式问题 2.1修改文字颜色、大小、粗细、边框的颜色 2.2修改聚焦后文字的颜色、边框的颜色 2.3修改鼠标悬浮时文字的颜色、边框的颜色 三、 组件样式问题 3.1修改文字颜色、大小、粗细 四、 样式问题 4.1当数据为空…

【数据结构】(Python)第六章:图

数据结构&#xff08;Python&#xff09;第六章&#xff1a;图 文章目录 数据结构&#xff08;Python&#xff09;第六章&#xff1a;图6.1 图的定义和基本概念6.2 图的存储结构6.2.1 邻接矩阵&#xff08;Adjacency Matrix&#xff09;6.2.2 邻接表&#xff08;Adjacency List…

特辣的海藻!4

目录 基础知识点 数对结构 BigInteger split() 题 1.商品库存管理 - 蓝桥云课 2.回文字符串 - 蓝桥云课 3.握手问题 - 蓝桥云课 基础知识点 数对结构 Java中类似C大的pair&#xff0c;自定义 public class Pair<A, B> {private final A first;private final B …

Imagination 最新的D系列GPU IP 为智能手机和其他电力受限设备上图形和计算工作负载的高效加速设定了新的标准

今日&#xff0c;Imagination Technologies&#xff08;“Imagination”&#xff09;宣布推出其最新的GPU IP——Imagination DXTP&#xff0c;该产品为智能手机和其他电力受限设备上图形和计算工作负载的高效加速设定了新的标准。得益于一系列微架构改进&#xff0c;DXTP在常见…

Android构建系统 - 02 初始化编译环境,添加产品

文章目录 初始化编译环境&#xff0c;选择产品envsetup.sh脚本不开启 subshell作用提供实用函数添加编译选项查找/执行 其它vendorsetup.sh lunch ProductProduct 概念编译选项解析层级配置文件目录AOSP 预制芯片及方案厂商 lunch命令作用编译目标BUILD 编译目标BUILDTYPE 编译…

React + TypeScript 复杂布局开发实战

React TypeScript 复杂布局开发实战 一、项目架构设计&#xff08;基于最新技术栈&#xff09; 1.1 技术选型与工程创建 # 使用Vite 5.x React 19 TypeScript 5.4 npx create-vitelatest power-designer-ui --template react-ts cd power-designer-ui && npm inst…

Python代码片段-断点任务

使用Python处理一堆长耗时任务的时候&#xff0c;为了防止异常退出程序或者手动退出程序后丢失任务进度&#xff0c;可用使用断点的方式记录任务进度&#xff0c;下次重载任务后&#xff0c;继续运行上次未完成的任务即可。 这里用json文件作为数据持久化的方式&#xff0c;免…