当前位置: 首页 > news >正文

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 

<videowidth="100%"height="100%":src=videourlcontrols="controls"ref="video"autoplay
></video>

相关文章:

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

第一字段处 <el-table-column label"视频时长" align"center"> <template slot-scope"scope"> <span>{{ formatDuration(scope.row.duration) }}</span> </template> </el-ta…...

antv G6绘制流程图

效果图&#xff08;优点&#xff1a;可以自定义每一条折线的颜色&#xff0c;可以自定义节点的颜色&#xff0c;以及折线的计算样式等&#xff09;&#xff1a; 代码&#xff1a; <!-- 流程图组件 --> <template><div id"container"></div>…...

完美隐藏滚动条方案 (2024 最新验证)

完美隐藏滚动条方案 (2024 最新验证) css /* 全局隐藏竖直滚动条但保留滚动功能 */ html {overflow: -moz-scrollbars-none; /* Firefox 旧版 */scrollbar-width: none; /* Firefox 64 */-ms-overflow-style: none; /* IE/Edge */overflow-y: overlay; …...

单片机的串口(USART)

Tx - 数据的发送引脚&#xff0c;Rx - 数据的接受引脚。 串口的数据帧格式 空闲状态高电平&#xff0c;起始位低电平&#xff0c;数据位有8位校验位&#xff0c;9位校验位&#xff0c;停止位是高电平保持一位或者半位&#xff0c;又或者两位的状态。 8位无校验位传输一个字节…...

实现分布式限流开源项目

以下是10个可以实现分布式限流中间件的开源项目推荐&#xff0c;这些项目基于不同的技术栈&#xff0c;适用于多种应用场景&#xff1a; 1. **Alibaba Sentinel** Sentinel 是阿里巴巴开源的分布式限流中间件&#xff0c;支持多种限流策略&#xff08;如QPS、并发线程数等…...

递归构建行政区域树(二)

概述 这篇博客中构建出的行政区域树利用element-ui的Tree组件展示出来。 实现 源码位于码云&#xff0c;欢迎点击哦。 项目结构 最后 好久没写基于element-ui的项目了&#xff0c;都有点生疏了。 好了&#xff0c;如果对你有帮助&#xff0c;欢迎点个免费的赞哦。...

AR技术下的电商:虚拟试穿/试用/试戴成新风尚

随着科技的日新月异&#xff0c;增强现实&#xff08;AR&#xff09;技术正悄然改变着我们的生活&#xff0c;尤其在电子商务领域&#xff0c;AR技术的融入正掀起一场前所未有的变革。那么&#xff0c;AR技术究竟是何方神圣&#xff1f;它在电商领域又展现出了哪些非凡的应用呢…...

社群团购平台的愿景构建与开源链动2+1模式S2B2C商城小程序应用探索

摘要&#xff1a;在数字经济背景下&#xff0c;社群团购作为一种新兴的商业模式&#xff0c;凭借其独特的互动性和便捷性&#xff0c;展现出巨大的市场潜力。本文旨在探讨社群团购平台愿景的构建策略&#xff0c;并结合开源链动21模式S2B2C商城小程序的应用&#xff0c;为创业者…...

笔记20250225

关于上拉电阻和下拉电阻的作用 原理 上拉电阻&#xff1a;在上拉电阻所连接的导线上&#xff0c;如果外部组件未启用&#xff0c;上拉电阻则“微弱地”将输入电压信号“拉高”。当外部组件未连接时&#xff0c;对输入端来说&#xff0c;外部“看上去”就是高阻抗的&#xff0c…...

【项目】基于Boost自主实现搜索引擎

&#x1f525; 个人主页&#xff1a;大耳朵土土垚 &#x1f525; 所属专栏&#xff1a;Linux系统编程 这里将会不定期更新有关Linux的内容&#xff0c;欢迎大家点赞&#xff0c;收藏&#xff0c;评论&#x1f973;&#x1f973;&#x1f389;&#x1f389;&#x1f389; 文章目…...

使用 Open3D 批量渲染并导出固定视角点云截图

一、前言 在三维点云处理与可视化中&#xff0c;固定视角批量生成点云渲染截图是一个常见的需求。例如&#xff0c;想要将同一系列的点云&#xff08;PCD 文件&#xff09;在同样的视角下生成序列图片&#xff0c;以便后续合成为视频或进行其他可视化演示。本文将介绍如何使用…...

汽车无钥匙进入一键启动操作正确步骤

汽车智能无钥匙进入和一键启动的技术在近年来比较成熟&#xff0c;不同车型的操作步骤可能略有不同&#xff0c;但基本的流程应该是通用的&#xff0c;不会因为时间变化而有大的改变。 移动管家汽车一键启动无钥匙进入系统通常是通过携带钥匙靠近车辆&#xff0c;然后触摸门把…...

JMeter 的基础知识-安装部分

以下将从环境配置开始,为你详细介绍 JMeter 的基础知识,涵盖环境搭建、界面认知、测试计划创建、常用组件使用等方面内容。 1. 环境配置 1.1 安装 Java JMeter 是基于 Java 开发的,所以需要先安装 Java 开发工具包(JDK)。 下载 JDK:访问 Oracle 官方网站(https://www…...

解决后端跨域问题

目录 一、什么是跨域问题&#xff1f; 1、跨域问题的定义 2、举例 3、为什么会有跨域问题的存在&#xff1f; 二、解决跨域问题 1、新建配置类 2、编写代码 三、结语 一、什么是跨域问题&#xff1f; 1、跨域问题的定义 跨域问题&#xff08;Cross-Origin Resource Sh…...

补题A-E Codeforces Round 953 (Div. 2)

https://codeforces.com/contest/1979 A. Guess the Maximum 原题链接&#xff1a;https://codeforces.com/contest/1979/problem/A 求相邻元素的最大值的最小值。 #include <bits/stdc.h> using namespace std; #define IOS ios::sync_with_stdio(0), cin.tie(0), cout…...

【WordPress】发布文章时自动通过机器人推送到钉钉

在您的主题下functions.php中添加如下代码&#xff1a; function wpso_dingding_publish_notify($post_ID) {// 获取文章对象$post get_post($post_ID);// 检查是否是文章首次发布&#xff08;即不是修订版&#xff09;if (get_post_status($post_ID) publish && !g…...

鸿蒙开发深入浅出04(首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影)

鸿蒙开发深入浅出04&#xff08;首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影&#xff09; 1、效果展示2、ets/pages/Home.ets3、ets/views/Home/SearchBar.ets4、ets/views/Home/NavList.ets5、ets/views/Home/TileList.ets6、ets/views/Home/PlanList.ets7、后端…...

管道文件(1)

1.无名管道&#xff1a;在同一主机下&#xff0c;具有亲缘关系的进程间的通信&#xff0c;如父子进程间的通信。 2.有名管道&#xff1a;在同一主机下的任意进程间的通信。 &#xff08;1&#xff09;管道的创建 &#xff08;2&#xff09;管道的打开&#xff08;open&#xff…...

什么是AI agent技术,有哪些著名案例

AI Agent技术是一种基于人工智能的智能实体&#xff0c;能够感知环境、进行决策和执行动作&#xff0c;以实现特定目标。近年来&#xff0c;随着大模型&#xff08;如GPT-4&#xff09;和生成式AI技术的发展&#xff0c;AI Agent在多个领域得到了广泛应用&#xff0c;并取得了显…...

Cursor结合Claude 3.7零基础开发愤怒的小鸟【深夜Claude 3.7系列发布,类似DeepSeek-R1和V3的合体?】

文章目录 前言介绍“市面上唯一的混合模型”卓越的编程能力、精准控制思考时间Cursor已接入Cursor结合Claude 3.7快速编写游戏完整html代码 &#x1f343;作者介绍&#xff1a;双非本科大四网络工程专业在读&#xff0c;阿里云专家博主&#xff0c;前三年专注于Java领域学习&am…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

【51单片机】4. 模块化编程与LCD1602Debug

1. 什么是模块化编程 传统编程会将所有函数放在main.c中&#xff0c;如果使用的模块多&#xff0c;一个文件内会有很多代码&#xff0c;不利于组织和管理 模块化编程则是将各个模块的代码放在不同的.c文件里&#xff0c;在.h文件里提供外部可调用函数声明&#xff0c;其他.c文…...

OpenGL-什么是软OpenGL/软渲染/软光栅?

‌软OpenGL&#xff08;Software OpenGL&#xff09;‌或者软渲染指完全通过CPU模拟实现的OpenGL渲染方式&#xff08;包括几何处理、光栅化、着色等&#xff09;&#xff0c;不依赖GPU硬件加速。这种模式通常性能较低&#xff0c;但兼容性极强&#xff0c;常用于不支持硬件加速…...

简约商务通用宣传年终总结12套PPT模版分享

IOS风格企业宣传PPT模版&#xff0c;年终工作总结PPT模版&#xff0c;简约精致扁平化商务通用动画PPT模版&#xff0c;素雅商务PPT模版 简约商务通用宣传年终总结12套PPT模版分享:商务通用年终总结类PPT模版https://pan.quark.cn/s/ece1e252d7df...

java+webstock

maven依赖 <dependency><groupId>org.java-websocket</groupId><artifactId>Java-WebSocket</artifactId><version>1.3.5</version></dependency><dependency><groupId>org.apache.tomcat.websocket</groupId&…...