前端判断视频格式（H264、H265，解决谷歌chrome浏览器无法播放mp4问题）-526互联

chrome浏览器对某些mp4文件不支持，播放时只有声音没有画面。

这种情况一般是因为视频文件为H265编码，而chrome浏览器只支持H264编码的文件（谷歌没买H265的使用专利）。

解决方法一：

使用软件（格式工厂或命令行库ffmpeg）对文件进行转换，将H265转换成H264。

格式工厂：

ffmpeg：

ffmpeg -i input.mp4 -vcodec h264 output.mp4

解决方法二：

为了程序的便捷性，可实现接收文件上传后实现自动化文件编码格式判断和新格式转换。

web端上传 + 后端执行转换的模式可使用以下方法处理视频：

前端使用 mediainfo.js 或 mp4box.js 库进行格式判断。

由于在mp4box.js中，如果一个MP4视频文件的编码格式为H.264，则其Codec是会包括avc这个字符串的，因此我们可以通过判断Codec中是否包含"avc"从而进行H.264视频编码格式的判断

代码：

var input  = document.getElementById("file"); // 获取上传的文件
input.onchange = function() {
  var file = this.files[0];
  var mp4boxfile = MP4Box.createFile();
  var is_transcode = 0;
  mp4boxFile.onReady = function(info){
    let mime = info.mime
    let codec = mime.match(/codecs="(\S*),/)[1]
    if (codec.indexOf('avc') === -1) {
      is_transcode = 1;  // 需要转码
    }
    // 进行文件上传操作
    ...
  }
  if(file){
    // 读取mp4的buffer
    var reader = new FileReader();
    var buffer = reader.readAsArrayBuffer(file);
    reader.onload = function(e) {
      var arrayBuffer = e.target.result
      arrayBuffer.fileStart = 0
      mp4boxFile.appendBuffer(arrayBuffer)
    }
  }
}

前端判断后，提交给后端此视频的格式，后端再决定是否调用程序转换视频，转换视频可使用ffmpeg库。

参考文献：https://www.cnblogs.com/Yellow-ice/p/13743400.html