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绘制流程图
效果图(优点:可以自定义每一条折线的颜色,可以自定义节点的颜色,以及折线的计算样式等): 代码: <!-- 流程图组件 --> <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 - 数据的发送引脚,Rx - 数据的接受引脚。 串口的数据帧格式 空闲状态高电平,起始位低电平,数据位有8位校验位,9位校验位,停止位是高电平保持一位或者半位,又或者两位的状态。 8位无校验位传输一个字节…...
实现分布式限流开源项目
以下是10个可以实现分布式限流中间件的开源项目推荐,这些项目基于不同的技术栈,适用于多种应用场景: 1. **Alibaba Sentinel** Sentinel 是阿里巴巴开源的分布式限流中间件,支持多种限流策略(如QPS、并发线程数等…...
递归构建行政区域树(二)
概述 这篇博客中构建出的行政区域树利用element-ui的Tree组件展示出来。 实现 源码位于码云,欢迎点击哦。 项目结构 最后 好久没写基于element-ui的项目了,都有点生疏了。 好了,如果对你有帮助,欢迎点个免费的赞哦。...
AR技术下的电商:虚拟试穿/试用/试戴成新风尚
随着科技的日新月异,增强现实(AR)技术正悄然改变着我们的生活,尤其在电子商务领域,AR技术的融入正掀起一场前所未有的变革。那么,AR技术究竟是何方神圣?它在电商领域又展现出了哪些非凡的应用呢…...
社群团购平台的愿景构建与开源链动2+1模式S2B2C商城小程序应用探索
摘要:在数字经济背景下,社群团购作为一种新兴的商业模式,凭借其独特的互动性和便捷性,展现出巨大的市场潜力。本文旨在探讨社群团购平台愿景的构建策略,并结合开源链动21模式S2B2C商城小程序的应用,为创业者…...
笔记20250225
关于上拉电阻和下拉电阻的作用 原理 上拉电阻:在上拉电阻所连接的导线上,如果外部组件未启用,上拉电阻则“微弱地”将输入电压信号“拉高”。当外部组件未连接时,对输入端来说,外部“看上去”就是高阻抗的,…...
【项目】基于Boost自主实现搜索引擎
🔥 个人主页:大耳朵土土垚 🔥 所属专栏:Linux系统编程 这里将会不定期更新有关Linux的内容,欢迎大家点赞,收藏,评论🥳🥳🎉🎉🎉 文章目…...
使用 Open3D 批量渲染并导出固定视角点云截图
一、前言 在三维点云处理与可视化中,固定视角批量生成点云渲染截图是一个常见的需求。例如,想要将同一系列的点云(PCD 文件)在同样的视角下生成序列图片,以便后续合成为视频或进行其他可视化演示。本文将介绍如何使用…...
汽车无钥匙进入一键启动操作正确步骤
汽车智能无钥匙进入和一键启动的技术在近年来比较成熟,不同车型的操作步骤可能略有不同,但基本的流程应该是通用的,不会因为时间变化而有大的改变。 移动管家汽车一键启动无钥匙进入系统通常是通过携带钥匙靠近车辆,然后触摸门把…...
JMeter 的基础知识-安装部分
以下将从环境配置开始,为你详细介绍 JMeter 的基础知识,涵盖环境搭建、界面认知、测试计划创建、常用组件使用等方面内容。 1. 环境配置 1.1 安装 Java JMeter 是基于 Java 开发的,所以需要先安装 Java 开发工具包(JDK)。 下载 JDK:访问 Oracle 官方网站(https://www…...
解决后端跨域问题
目录 一、什么是跨域问题? 1、跨域问题的定义 2、举例 3、为什么会有跨域问题的存在? 二、解决跨域问题 1、新建配置类 2、编写代码 三、结语 一、什么是跨域问题? 1、跨域问题的定义 跨域问题(Cross-Origin Resource Sh…...
补题A-E Codeforces Round 953 (Div. 2)
https://codeforces.com/contest/1979 A. Guess the Maximum 原题链接: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中添加如下代码: function wpso_dingding_publish_notify($post_ID) {// 获取文章对象$post get_post($post_ID);// 检查是否是文章首次发布(即不是修订版)if (get_post_status($post_ID) publish && !g…...
鸿蒙开发深入浅出04(首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影)
鸿蒙开发深入浅出04(首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影) 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.无名管道:在同一主机下,具有亲缘关系的进程间的通信,如父子进程间的通信。 2.有名管道:在同一主机下的任意进程间的通信。 (1)管道的创建 (2)管道的打开(openÿ…...
什么是AI agent技术,有哪些著名案例
AI Agent技术是一种基于人工智能的智能实体,能够感知环境、进行决策和执行动作,以实现特定目标。近年来,随着大模型(如GPT-4)和生成式AI技术的发展,AI Agent在多个领域得到了广泛应用,并取得了显…...
Cursor结合Claude 3.7零基础开发愤怒的小鸟【深夜Claude 3.7系列发布,类似DeepSeek-R1和V3的合体?】
文章目录 前言介绍“市面上唯一的混合模型”卓越的编程能力、精准控制思考时间Cursor已接入Cursor结合Claude 3.7快速编写游戏完整html代码 🍃作者介绍:双非本科大四网络工程专业在读,阿里云专家博主,前三年专注于Java领域学习&am…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
ios苹果系统,js 滑动屏幕、锚定无效
现象:window.addEventListener监听touch无效,划不动屏幕,但是代码逻辑都有执行到。 scrollIntoView也无效。 原因:这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作,从而会影响…...
服务器--宝塔命令
一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行! sudo su - 1. CentOS 系统: yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...
Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket(服务端和客户端都要)2. 绑定本地地址和端口&#x…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲
文章目录 前言第一部分:体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分:体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
MySQL 知识小结(一)
一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库,分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷,但是文件存放起来数据比较冗余,用二进制能够更好管理咱们M…...
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要: 近期,在使用较新版本的OpenSSH客户端连接老旧SSH服务器时,会遇到 "no matching key exchange method found", "n…...
