技术栈

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

昵称老重复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样式管理
相关推荐
tq6J5Yg14
20 分钟前
windows10本地部署openclaw
前端·python
ISkp3V8b4
1 小时前
从 ReAct 到 Workflow:基于云端 API 构建事件驱动的智能体
前端·react.js·前端框架
星空
1 小时前
前端--A_1--THML标签
前端
GISer_Jing
1 小时前
前端架构师视角:Electron 知识框架全解析(含实战+面试)
前端·面试·electron
全栈练习生
1 小时前
封装数字滚动动画函数
前端
TON_G-T
2 小时前
useEffect为什么会触发死循环
java·服务器·前端
Aurorar0rua
2 小时前
CS50 x 2024 Notes C - 02
前端
海参崴-
2 小时前
C++代码格式规范
java·前端·c++
谢尔登
3 小时前
【React】setState 触发渲染的流程
前端·react.js·前端框架
摸鱼仙人~
3 小时前
Vue中markdown-it基础使用教程
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02Qwen3.5-Omni与Qwen3.6模型全面解析(含测评/案例/使用教程)03OpenClaw 请求超时 llm request timed out 怎么解决?3 种方案实测,附完整排查流程04VMware Workstation Pro 17 虚拟机完整安装教程(2026最新)05【技术干货】Gemma 4 上手深度指南:本地多模态大模型的新基线06最新更新版本,OpenClaw v2026.4.2 深度解读剖析:Task Flow 重磅回归与安全架构的全面硬化07纯 HTML/CSS/JS 实现的高颜值登录页,还会眨眼睛!少女心爆棚!08AI 编程效率翻倍:Superpowers Skills 上手清单 + 完整指南09“wsl --install -d Ubuntu-22.04”下载慢,中国地区离线安装 Ubuntu 22.04 WSL方法(亲测2025年5月6日)10UV安装并设置国内源