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

Question

I've built an app to manage uploading adverts, the marketing team choose whether they want an image or video advert and fill out a form with title, start time etc. This data is then stored in my db.

However, with videos there's an extra step, they're uploaded to AWS, and the way this is configured it will only work with H264 encoded videos.

I'd like to add some client side validation for videos, I found a related question which checks whether a browser supports H264:

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

This the code the answer uses to check support

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"' ) );
   );

I've inspected the videos in the console, comparing one with H264 encoding to one without and I can't find anything within their attributes relating to H264. The src lists MP4 but nothing else:

src: data:video/mp4;base648766554654 etc.

Answer 1

You need a MP4 parser for JavaScript, for example mp4box.js .

In the case of MP4Box you can append buffers until the moov box is parsed, which can happen at the end of the file in the worst case.

Example from the documentation:

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() returns the file information:

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

In it you have tracks with the corresponding codec for each.

For details on the codecs format see RFC 6381 .