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

安装

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

响应视频信息

相关推荐
天蓝色的鱼鱼5 分钟前
扔掉 ESLint + Prettier:Biome 全家桶实战
前端
533_19 分钟前
[element-plus] el-tabs和el-menu联动
前端·javascript·vue.js
小呀小叮当~19 分钟前
Telegram 有哪些实用功能?一文了解
前端·人工智能·后端·其它
索西引擎31 分钟前
【React】React Fiber 架构:设计动机、核心机制与调度策略分析
前端·react.js·架构
雨季mo浅忆1 小时前
上传文件夹
前端·vue3
谙忆10241 小时前
响应式图片实战:srcset、sizes、picture 与 art direction 到底怎么用
前端
索西引擎3 小时前
【React】JSX:JavaScript 语法扩展的本质、编译机制与表达能力分析
前端·javascript·react.js
国科安芯11 小时前
航天电子模拟前端三大支柱:精密运放、高速运放与电压监控的协同设计方法——ASL8522S/ASL622S/ASL706S技术解析
前端·单片机·嵌入式硬件·fpga开发·架构·安全性测试
神明不懂浪漫12 小时前
【第四章】CSS(二)——文本外观属性与复合选择器
前端·css·经验分享·笔记
kyriewen12 小时前
别再用AI debug了——这5种bug越修越烂
前端·javascript·ai编程