技术栈

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

昵称老重复2024-08-08 17:49

安装

复制代码
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:

响应视频信息

上一篇:React(五):XLS、XLSX文件在线预览
下一篇:React--》掌握styled-components重塑React样式管理
相关推荐
逾明
27 分钟前
Claude Code及Codex的MCP安装和Mastergo MCP的使用
前端·mcp
LovroMance
33 分钟前
如何进行组件封装
前端
難釋懷
35 分钟前
Redis服务器端优化-慢查询优化
前端·redis·bootstrap
sghuter
1 小时前
Chrome如何重塑Web标准未来
前端·chrome
渣渣xiong
1 小时前
从零开始:前端转型AI agent直到就业第十四天-第十七天
前端·人工智能
changshuaihua001
1 小时前
React 入门
前端·javascript·react.js
兰为鹏
1 小时前
做前端需求总结出的非常好用的skill
前端
笨笨狗吞噬者
1 小时前
Opus 4.7 skill 编写和使用实践
前端·ai编程
舞影天上
2 小时前
WordPress MCP Adapter 调试实战:从"连接失败"到完全可用
前端·ai编程
可视之道
2 小时前
Web组态编辑器的撤销重做架构设计
前端
热门推荐
012026年4月技术前沿:AI大模型爆发、智能体革命与量子安全新纪元02GitHub 镜像站点032026年4月AI大事件深度解读:大模型竞争进入“深水区“042026 年 AI 编程助手全面对比评测:Cursor vs Copilot vs Claude Code vs GitHub Copilot Free05近期有什么ai的新消息,新动态? 2026.4月06AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析07Claude Code Windows 兼容性问题:指定版本 2.1.112 可解决08从限购到畅通:GLM-5.1 Coding Plan接入攻略09UBUNTU Claude Code 报错 claude native binary not installed10免费!不限量!用opencode接入英伟达(NVIDIA)大模型,轻松打造你的 AI 编程助手