技术栈

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

昵称老重复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样式管理
相关推荐
Justinc.
35 分钟前
HTML5新增属性
前端·html·html5
1024小神
1 小时前
nextjs项目build导出静态文件
前端·javascript
阿聪_
1 小时前
createContext 还是 useSyncExternalStore?一文讲清场景与选型
前端
Linsk
1 小时前
当我把前端条件加载做到极致
前端·前端工程化
_辉
1 小时前
大模型构建表单与数据结构
前端
祝鹏
1 小时前
动态表单生成
前端
luckyJian
1 小时前
React深入浅出理解
前端
是一碗螺丝粉
1 小时前
拯救你的app/小程序审核!一套完美避开审核封禁的URL黑名单机制
前端·javascript·微信小程序
littleding
1 小时前
Vue3之计算属性
前端·vue.js
VincentHe
1 小时前
利用豆瓣rss生成(伪)纯静态影单
前端
热门推荐
01UV安装并设置国内源02KGG转MP3工具|非KGM文件|解密音频03【2025.08.06最新版】Android Studio下载、安装及配置记录(自动下载sdk)04Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code052025最新国内服务器可用docker源仓库地址大全(2025年8月更新)06蜘蛛磁力 搜索引擎大全,如何使用蜘蛛磁力查找磁力链接07TRAE 规则(Rules)配置指南:个人习惯、团队规范与最佳实践08TRAE Rules 实践:为项目配置 6A 工作流09全球最强模型Grok4,国内已可免费使用!(附教程)10NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南