mediainfo.js获取视频详细信息，js获取视频帧数

需求：上传视频的时候需要知道该视频的帧数等信息，input的file直接读取是不能读取帧数的

方式：通过引入mediainfo.js来获取视频的帧率和视频的总时长，用帧率*时长得出总帧数

栗子：

上面输出格式是 text 我们可以根据需要将格式设为 json 对象，这样就能获取想要的信息了

//这是text 格式
MediaInfo({ format: 'text' }, (mediainfo) => {fileinput.addEventListener('change', () => onChangeFile(mediainfo))
})
//可以改为 json 对象格式
MediaInfo({ format: 'object' }, (mediainfo) => {fileinput.addEventListener('change', () => onChangeFile(mediainfo))
})

然后在 get_file_info 方法中将需要的信息获取出来使用就可以了

function get_file_info(mediainfo, file) {let getSize = () => file.sizelet readChunk = (chunkSize, offset) =>new Promise((resolve, reject) => {let reader = new FileReader()reader.onload = (event) => {if (event.target.error) {reject(event.target.error)}resolve(new Uint8Array(event.target.result))}reader.readAsArrayBuffer(file.slice(offset, offset + chunkSize))})return mediainfo.analyzeData(getSize, readChunk).then((result) => {// 如果是object，可以拿到结果对象let res = result.media.track[1];console.log(res)//获取帧数和总时长console.log(res.FrameRate,res.Duration);}).catch((error) => {output.value = `${output.value}\n\nAn error occured:\n${error.stack}`})
}

注意，当传入.avi格式时是不能获取到帧率的，因为我的视频格式统一是25帧率，所以我给了一个默认值25。详细信息见官网的使用

这个demo需要放到http服务中访问才能正确使用，或者使用CDN在线地址引入mediainfo.js

<script src="https://unpkg.com/mediainfo.js/dist/mediainfo.min.js" ></script>

mediainfo 在线使用地址

demo下载地址(这个demo需要放到http服务中才能正确使用)

mediainfo.js获取视频详细信息，js获取视频帧数相关推荐

获取linux详细信息,Linux 获取网口详细信息
一般来说,研究 ifconfig.c 源代码就可以达到目的了. 但是Linux已经提供了比较方便的获取网口信息的方式: [philip@catonbj ~]$ cat /sys/class/net/e ...
PHP 获取服务器详细信息
PHP 获取系统信息,PHP 获取服务器详细信息获取系统类型及版本号: php_uname() (例:Windows NT ...
淘宝/天猫API接口，item_sku - 淘宝商品SKU详细信息查询，淘宝/天猫获取sku详细信息 API 返回值说明
欢迎使用淘宝API接口(item_sku - 淘宝商品SKU详细信息查询 ) 你好! 这是你使用我们的淘宝API接口获取商品详细接口说明. 测试地址:获取Key和secret 测试结果: Reques ...
淘宝API接口：获取sku详细信息
今天分享的是淘宝平台API,item_sku - 获取sku详细信息点击注册测试地址(获取Key和secret) { "item": { "num_iid": ...
微信小程序控制台报错对应的服务器证书无效控制台输入 showRequestInfo() 可以获取更详细信息原因是ssl证书过期重新申请即可
微信小程序控制台报错对应的服务器证书无效.控制台输入 showRequestInfo() 可以获取更详细信息报错原因:域名下的SSL证书过期我这边报错的原因是ssl证书过期重新申请后就好了, ...
NX二次开发-UFUN获取工程图详细信息UF_DRAW_ask_drawing_info
NX二次开发-UFUN获取工程图详细信息UF_DRAW_ask_drawing_info NX9+VS2012#include <uf.h> #include <uf_draw.h& ...
淘宝/天猫如何获取sku API接口，item_sku - 获取sku详细信息
一.接口参数说明: 通过淘宝/天猫app中分享至PC端的短链接商品ID,通过调用item_sku - 获得sku接口,可以得到接口要的商品sku详情数据. 点击获取测试key和secret 请求地址: ...
淘宝API接口（item_sku - 获取sku详细信息）
今天分享淘宝API接口:获取sku详细信息,包括其他各大电商平台都在使用范围内想了解的可以进去看看:点击测试参数示例: { "item": { &quo ...
Android获取歌曲详细信息
Android获取歌曲详细信息一.目标二.实现方案三.HTML方案四.JSON方案五.接下来六.Finally 在<Android实现歌词笔记构思>时,构思了如何在笔记中添加歌 ...
SSH初探：通过查看GPU的PID获取USER详细信息
笔者课题组公用服务器,有时候遇到长时间训练占用GPU的情况,可以通过查看GPU的PID获取USER详细信息,从而沟通协商GPU的使用. watch -n 1 nvidia-smi 上面这个指令在Lin ...

mediainfo.js获取视频详细信息，js获取视频帧数

mediainfo.js获取视频详细信息，js获取视频帧数相关推荐

最新文章

热门文章