在上传之前检查MP4是否为H264编码

时间:2017-01-12 12:36:38

标签: javascript validation video ffmpeg h.264

我已经构建了一个用于管理上传广告的应用,营销团队会选择是否需要图片或视频广告,并填写带有标题,开始时间等的表单。然后将此数据存储在我的数据库中。

但是,对于视频,还有一个额外的步骤,它们会上传到AWS,而且配置方式只适用于H264编码的视频。

我想为视频添加一些客户端验证,我发现一个相关的问题,检查浏览器是否支持H264:

How to detect supported video formats for the HTML5 video tag?

这是答案用来检查支持的代码

var testEl = document.createElement( "video" ),
    mpeg4, h264;

if ( testEl.canPlayType ) {
    // Check for h264 support
    h264 = "" !== ( testEl.canPlayType( 'video/mp4; codecs="avc1.42E01E"' )
        || testEl.canPlayType( 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' ) );
   );

我已经在控制台中检查了视频,将其中一个与H264编码进行比较,将其与一个没有,我在其属性中找不到与H264相关的任何内容。 src列出了MP4,但没有别的:

src: data:video/mp4;base648766554654 etc.

1 个答案:

答案 0 :(得分:2)

您需要JavaScript的MP4解析器,例如mp4box.js

对于MP4Box,您可以追加缓冲区,直到解析moov框,这可能发生在最坏情况下文件的末尾。

文档中的示例:

var MP4Box = require('mp4box').MP4Box;
var mp4box = new MP4Box();
mp4box.onError = function(e) {};
mp4box.onReady = function(info) {};
mp4box.appendBuffer(data);
mp4box.appendBuffer(data);
mp4box.appendBuffer(data);
...
mp4box.flush();

onReady()返回文件信息:

mp4box.onReady = function (info) {
    console.log("Received File Information");
}

其中包含tracks,每个codec对应{。}}。

有关codecs格式的详细信息,请参阅RFC 6381