uniapp：获取视频帧率、帧数、帧速率、总比特率、视频总时长、视频宽高、码率、文件格式，uniApp项目中前端获取视频文件的各种详细信息，支持主流视频格式（移动端H5网页/小程序/安卓苹果APP端）

最新推荐文章于 2025-09-03 22:54:53 发布
最新推荐文章于 2025-09-03 22:54:53 发布
阅读量2.3k 收藏 3
点赞数 6
CC 4.0 BY-SA版权
分类专栏： uniapp常见问题解决 文章标签： uni-app 微信小程序 安卓app 苹果app H5 获取视频MP4信息 读取视频文件数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/151072847

效果图

uniapp如何获取视频帧率/帧数/帧速率/总比特率/视频时长/宽高/码率/编码/格式等，可在上传视频后进行读取视频文件并展示信息，或者在上传视频前进行读取视频信息（比如文件上传前判断文件格式，大小，时长等）实现纯前端完成读取视频各种信息，支持各种视频mp4、avi、flv、wmv、mov等主流格式，在uniapp(小程序/手机h5网页/安卓苹果app/nvue)全平台兼容！

uniapp Vue3和Vue2都能用，复制运行后稍微改下就能用了！

在这里插入图片描述

完整源码

具体代码如下直接复制。

了解本专栏 订阅专栏 解锁全文
vue3：实现前端获取视频帧率、帧数、帧速率、总比特率、视频总时长、视频宽高、码率、文件格式，在vue3项目中获取视频文件的各种详细信息源码（支持主流视频格式mp4、avi、flv、wmv、mov等）
高级前端工程师
08-30 3951
Vue3前端获取视频帧率/帧数，获取视频播放时长，vue3获取视频时长、码率、格式等视频详细信息，vue3上传前获取到视频或音频的详细信息，例如帧速率，比特率等，vue3获取视频文件详细信息 如帧速率、总比特率等，vue3纯前端读取上传视频的信息，在Vue3项目中获取视频的时长，Vue3项目中集成使用mediainfo.js库，上传文件前读取上传的视频文件，vue3获取视频时长、码率、格式等视频详细信息，在vue3中使用第三方库获取视频文件的格式，文件大小，分辨率，率，比特率，时长，编码，音频声道，音频采集
python获取视频帧率，总帧数，分辨率等视频信息
Joseph__Lagrange的博客
01-02 3695
python获取视频帧率，总帧数，分辨率 亲测有效 https://blog.csdn.net/m0_37542524/article/details/102924224
利用js文件获取视频文件详细信息 如帧速率、总比特率等
zouyi_888的博客
01-14 5494
用js获取上传的视频文件的详细信息，如帧速率、总比特率等。
ffprobe获取视频的分辨率帧数等信息
lulongfei172006的专栏
05-31 8439
FFmpega获取视频的分辨率帧数等信息
视频基础学习三——视频帧率、码率与分辨率
山河君的分享博客
03-27 7146
在之前的文章中详细介绍了一些关于图像的色彩与格式，而视频其实就是由一张张图片进行展示呈现出来的。我们会经常说一段视频的质量好不好，而什么是视频的质量呢？博主的个人理解就是播放视频时的流畅度、清晰度，以及这一段视频的大小。上一篇文章中介绍过如果一张rgb24存储的图片大小为1280∗720∗3102410242.63MB1280∗720∗2.63MB。
ffplay 指定帧率_分辨率、帧速率、比特率、视频格式的关系
weixin_42099176的博客
12-22 3199
经常遇到同学问，码率是什么？比特率是干嘛的？帧速率是啥？分辨率又是什么？这个说又说不清，听又听不懂的问题困扰了好多刚入门的小白今天本帅就专门来给大家好好梳理一下这些个专业名词。分辨率分辨率，又称解析度、解像度，可以从显示分辨率与图像分辨率两个方向来分类。显示分辨率（屏幕分辨率）是屏幕图像的精密度，是指显示器所能显示的像素有多少。我们常见电视厂家标注：4k或者8k图像分辨率则是单位英寸中所包含的像素...
音视频基本概念：分辨率、帧速率、码流、采样位深、采样率、比特率
yinshipin007的博客
06-28 2140
一、分辨率分辨率可以从显示分辨率与图像分辨率两个方向来分类。显示分辨率（屏幕分辨率）是屏幕图像的精密度，是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多，所以分辨率是个非常重要的性能指标之一。可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。显示分辨率一定的情况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。图像分辨率则是单位英寸中所包含的像素点数
音视频从入门到精通——视频 码率 帧率 分辨率
e891377的专栏
09-26 8317
3.也就是说1M 的宽带下载速度不会超过 128KB/s ，也就是理论上1秒钟，可以下载128K的内容，实际上1M宽带，下载速度100k/s就属于正常，毕竟理论值不⼀定能达到。在码率⼀定的情况下，分辨率与清晰度成反⽐关系：分辨率越⾼，图像越不清晰，分辨率越低，图像越清晰。视频是由⼀张张的图⽚形成的，我们看起来很流畅是因为⼈眼有视觉停留的现象，当图⽚以24张每秒的速度匀速播放时，这些图⽚看起来就是连续的。视频在采集后都需要进⾏压缩，如果不压缩，实在是太⼤了，此时就需要根据分辨率、帧率、码率做个平衡。
vue 上传前获取到视频或音频的详细信息，例如帧速率，比特率等等，用mediainfo实现（暂时记录）
qq_37273844的博客
05-31 1677
注意上面的new CopyPlugin([{ from: wasmFile, to: ‘.’ }])这个是webpack版本比较低的写法。的写法会提示copy plugin patterns 需要的参数是array，索引改成了数组传入就编译成功了。使用copy-webpack-plugin将MediaInfoModule.wasm拷贝到构建路径。因为MediaInfoModule.wasm加载需要时间，建议在main.js引入。配置webpack plugin。我用的是element的框架。
视频帧率与码率测试步骤详解
码率则是视频数据传输速率的量度，通常以比特率（bps，bits per second）表示，它决定了视频的清晰度和文件大小。 在测试视频帧率时，文档提供了两种方法。首先，可以使用QuickTime Player检查“帧编号”，通过逐帧...
使用 Uni-app 打包 外链地址APK 及 iOS 注意事项
baifangfang521的博客
09-03 504
Uni-app跨平台应用打包指南：本文详细讲解如何将Uni-app项目打包为Android APK和iOS应用。重点包括Android的minSdkVersion、targetSdkVersion配置（建议升级至33）、abiFilters设置（需包含64位架构）以及HTTP流量的特殊处理。iOS部分强调ATS安全策略、WKWebView使用和App Store审核要求。文章提供了完整的WebView示例代码，并针对跨平台开发提出实用建议：优先使用HTTPS、优化网页性能、做好版本控制和多设备测试。这些配置
uniapp+vue3 微信小程序全屏广告组件功能
最新发布
陌上花开然不归矣
09-03 584
全屏广告组件是一个功能丰富的Vue组件，主要用于应用启动或特定场景下展示推广内容。核心功能包括：自动显示控制（含频率管理和延迟显示）、30秒倒计时关闭、点击跳转微信小程序（支持配置AppID和路径）、手动跳过按钮等。组件采用响应式设计适配不同屏幕，提供毛玻璃背景、现代化UI等视觉效果。通过本地存储实现每日显示频率控制，避免用户打扰。开发者可通过props配置图片URL、倒计时时长等参数，并监听close/click事件。组件包含详细的日志记录，便于调试和问题追踪。
uni-app支持单多选、搜索、查询、限制能否点击组件
cyj0919的博客
09-01 65
摘要：本文介绍了一个基于Vue.js的自定义下拉选择组件selectg的实现代码。该组件支持单选/多选、搜索过滤、防抖处理、滚动加载等功能，并提供了完整的类型安全检查和错误处理。组件包含响应式状态管理、选项过滤逻辑、选中项处理等核心功能，同时支持自定义标签和值字段名。样式部分采用SCSS编写，实现了符合现代UI设计的下拉框样式。最后展示了组件在页面中的调用示例和搜索功能的后端对接方法。该组件具有高度的可定制性和鲁棒性，适用于各类表单场景。
UniApp 事件管理器重构实践：从混乱到模块化管理
2501_92822955的博客
09-01 562
随着业务增长，我们遇到了越来越多的事件管理问题。本文分享事件管理器重构的整个过程，包括遇到的问题、优化思路和最终实现。通过这次优化，事件管理器不仅解决了原有混乱问题，也为项目长期维护和扩展打下了坚实基础。在大型 UniApp 项目中，组件间通信通常依赖。平铺枚举解决了硬编码问题，但。这让我们意识到：必须先。
固定资产管理系统（蓝牙标签打印+移动端Java+Vue+Uniapp源码）
xx_123321456的博客
09-02 180
该资产管理系统提供11项核心功能，包括资产全生命周期管理、维保和仓库管理等。配套资料涵盖软件项目全流程文档：从需求分析、设计开发到测试验收的完整技术文档（31种），项目管理全套资料（9类），以及运维实施相关文件（8项）。同时提供20余个行业解决方案模板，如智慧城市、医疗信息化等。系统支持资产标签定制、多维统计分析，实现固定资产数字化管理。所有文档资料可按规范获取，确保项目合规性和可追溯性。（注：实际摘要147字，保留关键信息并控制广告内容比例）
Uniapp 项目创建与目录结构解析
xkxnq的专栏
08-31 262
启动开发环境，通过 HBuilderX 可视化工具可实时预览多端效果。
uni-app 实现做练习题(每一题从后端接口请求&切换动画&记录错题)
m0_52952413的博客
09-02 118
动画通过@keyframes 设置入场和出场动画。2.选择完之后请求数据拿到结果 反馈用户。1.每一道题都从后端去请求数据。3.记录错题 做完计算正确率。
uniapp中输入金额的过滤（只允许输入数字和小数点）
努力的nana
09-02 193
【代码】uniapp中输入金额的过滤（只允许输入数字和小数点）
Uniapp 图片前端上传功能实现与详解
weixin_44590591的博客
09-01 276
UniApp跨平台开发框架提供了一套完整的图片上传解决方案。本文介绍了核心代码结构，包括图片选择配置、上传流程优化和错误处理机制。关键点包括限制单次选择、添加时间戳确保唯一文件名、完善的异常捕获和用户取消操作处理。文章还提出了性能优化方向（大图压缩、多图队列）和扩展功能建议（预览、裁剪、重试）。这套方案代码清晰、错误处理完善，可直接集成到各类UniApp项目中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卷卷吃年糕！

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值