背景:在做chrome上传的时候发现在同一个MP4格局在浏览器关上有的不能播放
调研: 通过调研发现是浏览器的兼容问题 不同的浏览器的播放的MP4格局编码是不一样的,如图
解决:如果想要在浏览器播放的话 须要对不同编码的格式文件进行拦挡,那么怎么获取文件的编码格局呢?
采纳:mp4box.js 通过官网配置的onReady办法获取文件的详细信息,如图:
var MP4Box = require('mp4box'); // Or whatever import method you prefer.var mp4boxfile = MP4Box.createFile();mp4boxfile.onError = function(e) {};mp4boxfile.onReady = function(info) {};mp4boxfile.appendBuffer(data);mp4boxfile.appendBuffer(data);mp4boxfile.appendBuffer(data);
须要留神的是MP4box承受文件的是一个Buffer对象,具体想看:
/** * * @hack 检测局部mp4视频的编码格局、用于检测chrome浏览器不能播放的问题 * * 参考链接: * 1、<http://www.soolco.com/post/83098_1_1.html> * 2、<https://gpac.github.io/mp4box.js/> * * */export const checkVideoCode = (file: any, callback: Function) => { const mp4boxFile = MP4Box.createFile(); const reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = function(e: any) { const arrayBuffer = e.target.result; arrayBuffer.fileStart = 0; mp4boxFile.appendBuffer(arrayBuffer); }; mp4boxFile.onReady = function(info: any) { callback(info); };};
既然获取了以后的视频的文件编码那么怎么晓得以后是否能够播放,我放两张图比拟一哈:
这样看起来还是有些差异的,那么编码格局不同的 mime
也是不同的,这样就能够判断以后字段是否有avc
字段,如果有的话,那么以后的格局编码 chrome是不反对的哦
参考资料:
- http://www.soolco.com/post/83098_1_1.html
- https://blog.csdn.net/tester1...
- https://github.com/gpac/mp4bo...