关于javascript:如何判断视\隐频文件的编码格式

8次阅读

共计 1163 个字符，预计需要花费 3 分钟才能阅读完成。

背景：在做 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 是不反对的哦

参考资料：