How JS Get Video Codec

4 min readJul 12, 2019

Many web developers firstly using Media Source, they may be cannot understand the video codec check:

var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {  
  var mediaSource = new MediaSource();
  //console.log(mediaSource.readyState); // closed
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
  console.error('Unsupported MIME type or codec: ', mimeCodec);
}

As is known to us, it will help us to check if the browser could support the normal playback of the video streaming.

So what is codec? And how it works?

Video Codec

Since the video is born, we are still to get the best quality and the lower bitrate.

And recently the H.265 and VP9 play an important role in many OS. Sadly in the browser, the H.264 is the most popular video codec.

Video codec contains Profiles and Levels. The standard defines a set of capabilities, which are referred to as profiles, targeting specific classes of applications. As the term is used in the standard, a “level” is a specified set of constraints that indicate a degree of required decoder performance for a profile. For example, a level of support within a profile specifies the maximum picture resolution, frame rate, and bit rate that a decoder may use.

We can get this information via Mediainfo .

So how we get them?

How to get codec value

FFmpeg and mp4box are the most popular tools for many platforms (Linux and Mac os). I think if you have a lot of interest in video streaming, you should download them.

FFmpge

$ ffmpge -i ./test1.mp4

The output:

And focus this line.

Stream #0:0(und): Video: h264 (Constrained Baseline) (avc1 / 0x31637661), yuv420p(tv, bt709), 480x480, 428 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default)

mp4box

$ mp4box -info ./test1.mp4

We get the result:

Codec Parameters: avc1.42C01E

How JS get Codec

Now we can use some cool tools to help us to get the video codec value. If we want to use JS in browsers, we can use mp4box.js(JS Version, amazing JS Library) to solve it.

Firstly we send range request for a mp4 file.

Secondly, use mp4box.js to create an mp4file.

Thirdly, use mp4box.js to append the buffer.

Finally, set ready callback of mp4box and handle the moov info.

const ASSET_URL = './video/a3.mp4';  
const video = document.querySelector('.js-player-mp4');  
const mp4boxfile = MP4Box.createFile();
function playMp4() {  
  log('Get Video Element');
  bindMp4box();
  // set range request
  const range = 'bytes=0-50000';
  fetch(ASSET_URL, {
    headers: {
      range,
    }
  }).then(function(response) {
    return response.arrayBuffer();
  }).then(function(arrayBuffer) {
    // mp4box set the fileStart
    arrayBuffer.fileStart = 0;
    mp4boxfile.appendBuffer(arrayBuffer);
  });
}function bindMp4box() {  
  mp4boxfile.onReady = function (info) {
    log('Get Video Info');
    video.src = ASSET_URL;
    video.play();
    showVideoInfo(info);
    }
}function showVideoInfo(info) {  
  console.log(info);
  log('Duration: ' + parseInt(info.duration / 1000) + 's');
  log('Brands: ' + info.brands.join(','));
  log('Video Metadata:  ');
  const videoTrack = info.tracks[0];
  log('Video Codec: "' + videoTrack.codec + '"; nb_samples: ' + videoTrack.nb_samples);
  log(videoTrack.name + ': size: ' + videoTrack.size + '; bitrate: ' + videoTrack.bitrate);
  log('Audio Metadata');
  const audioTrack = info.tracks[1];
  log('Audio Codec: "' + audioTrack.codec + '"; nb_samples: ' + audioTrack.nb_samples);
  log(audioTrack.name + ': size: ' + audioTrack.size + '; bitrate: ' + audioTrack.bitrate);}

Demo

Code: https://github.com/JackPu/freleap.github.io/tree/master/js-get-codec

文章中文地址： https://www.jackpu.com/shi-yong-js-huo-qu-shi-pin-codec/