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

安装

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

响应视频信息

相关推荐
理人综艺好会10 小时前
Web学习之用户认证
前端·学习
We་ct11 小时前
LeetCode 36. 有效的数独:Set实现哈希表最优解
前端·算法·leetcode·typescript·散列表
weixin_3954489111 小时前
main.c_cursor_0129
前端·网络·算法
2401_8590490811 小时前
git submodule update --init --recursive无法拉取解决
前端·chrome·git
这是个栗子12 小时前
【Vue代码分析】前端动态路由传参与可选参数标记:实现“添加/查看”模式的灵活路由配置
前端·javascript·vue.js
刘一说12 小时前
Vue 动态路由参数丢失问题详解:为什么 `:id` 拿不到值?
前端·javascript·vue.js
熊猫钓鱼>_>12 小时前
动态网站发布部署核心问题详解
前端·nginx·容器化·网页开发·云服务器·静态部署
方也_arkling12 小时前
elementPlus按需导入配置
前端·javascript·vue.js
我的xiaodoujiao13 小时前
使用 Python 语言 从 0 到 1 搭建完整 Web UI自动化测试学习系列 44--将自动化测试结果自动推送至钉钉工作群聊
前端·python·测试工具·ui·pytest
沛沛老爹13 小时前
Web开发者转型AI:多模态Agent视频分析技能开发实战
前端·人工智能·音视频