前端获取视频文件宽高信息和视频时长

安装

复制代码
yarn add video-metadata-thumbnails  | npm install video-metadata-thumbnails

引入依赖包

复制代码
import { getMetadata } from 'video-metadata-thumbnails'

使用

复制代码
if (file.name.includes('mp4')) {
  if (file) {
    try {
      console.log(file)
      // 获取视频的元数据
      const metadata = await getMetadata(file.raw)
      console.log('视频信息', metadata)
    } catch (error) {
      console.error( error)
    }
  }
}

参数接收值 file.raw:

响应视频信息

相关推荐
IT_陈寒15 分钟前
Vue的v-for里用index当key,我被自己坑惨了
前端·人工智能·后端
代码不加糖1 小时前
0基础搭建前后端分离项目:实现菜单与界面左右布局
java·前端·javascript·mysql·elementui·mybatis
zhensherlock1 小时前
Protocol Launcher 系列:Tally 快速计数器的深度集成
前端·javascript·typescript·node.js·自动化·github·js
AC赳赳老秦1 小时前
OpenClaw权限管理实操:团队共享Agent,设置操作权限,保障数据安全
服务器·开发语言·前端·javascript·excel·deepseek·openclaw
光影少年2 小时前
Polyline 组件如何绘制渐变区域?
前端·javascript·掘金·金石计划
Pkmer2 小时前
古法编程: React思维模型快速建立
前端·react.js
jiayong232 小时前
第 38 课:任务列表里高亮当前正在查看详情的任务
开发语言·前端·javascript·vue.js·学习
anOnion3 小时前
构建无障碍组件之Spinbutton Pattern
前端·html·交互设计
程序员Better3 小时前
前端成功转型AI全栈,我踩过的坑都替你填上了
前端·后端·ai编程
兔子零10243 小时前
GPT-5.5 与 DeepSeek-V4:大模型竞争的本质,正在从“谁更强”变成“谁让成本更低”
前端·javascript·后端