背景

最近项目开发过程中，遇到上传的mp4在webview上无法完成播放

分析

对比可以播放和不可以播放的视频流格式

image.png
image.png

原因分析：

image.png
对于两个不同的.mp4视频来说，虽然它们的后缀名是一样的，但是两个MP4视频采用的编码格式可能是不一样的，它们可以采用H.264或H.265的编码格式进行编码，也可以采用MPEG-4的编码方式。而对于MP4视频文件的播放，Chrome只支持标准的H.264方式编码。因此如果MP4视频的编码格式不是H.264，那么这个视频文件就无法正常播放~

测试解决方案

 ffmpeg -i input.mp4 -vcodec libx264 -acodec aac output.mp4

Coding

• 当用户上传MP4文件时，前端会对MP4视频文件的编码格式进行判断
• 后台该文件进行转码
  前端怎么进行判断一个MP4视频文件是不是H.264编码格式呢？在这里，就需要获取当前视频编码的信息，也就是Codec，并且根据Codec进行视频编码格式的判断。而为了获取到Codec，我们可以借助现有的一些插件，如mediainfo.js（https://github.com/buzz/mediainfo.js）或mp4box.js（https://github.com/gpac/mp4box.js）进行获取，而由于medianinfo.js的体积较大，mp4box.js比较轻量，因此实现过程中采用了mp4box.js进行视频编码格式的检测。

参考

• https://www.cnblogs.com/Yellow-ice/p/13743400.html
• https://www.videohelp.com/software/MP4Box
• 代码库上有一个 MP4Box_android 项目（很旧），但在 Android 上包装了 MP4Box 可执行文件：https://github.com/gpac/gpac/tree/master/applications/mp4box_android