日常开发中,遇到一个需求是视频文件上传之前,判断用户选择的 mp4 文件编码格式,若不是期望的编码,则不予上传。分析一下,这是一个比较 basic 的需求,我们只需要获取到视频文件的 MINE 信息,就可以判断视频编码。由于网上没有比较完整的文章,所以著文分享。
我们会使用到mp4box这个工具库。首先安装它:
如果你使用Typescript,请参考Typescript Support添加声明。
接着引入库和声明一个 FileReader 用于协助读取文件
1 2
| import MP4Box from 'mp4box' var reader: FileReader = new FileReader()
HAXE
|
创建 Input 和处理 onChange,这里我们使用HTML5的accept属性限制只能选择mp4格式的文件。
1
| <Input type="file" onChange={onFileSelected} accept="video/mp4"></Input>
XML
|
1 2 3
| const onFileSelected = (e: any) => { reader.readAsArrayBuffer(e.target.files[0]); }
REASONML
|
接着通过 FileReader 的 loadend 事件进行后续处理,这里记得要回收reader变量。
1 2 3 4 5 6 7 8 9 10 11 12
| useEffect(() => { reader.addEventListene ('loadend', function () { let result: any = reader.result; result.fileStart = 0; let mp4boxfile = MP4Box.createFile() mp4boxfile.onReady = mp4Parsed mp4boxfile.appendBuffer(result); }); return () => { (reader as any) = null } }, [])
TYPESCRIPT
|
获取到文件后,解析文件MINE类型,后续可以自行添加提示信息。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| const mp4Parsed = (info: any) => { var codecs = []; for (var t = 0; t < info.tracks.length; ++t) { codecs.push(info.tracks[t].codec); } let fileCode = analysisCode(codecs[0]) console.log(fileCode) };
const analysisCode = (code: string) => { if (code.startsWith('avc')) { return 'h264' } else if (code.startsWith('hvc')) { return 'h265' } else { throw new Error('unknown video code') } }
TYPESCRIPT
|
基于Create React App写了一个demo,详见github。