当前位置: 首页 > 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…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...