HTML5 read video metadata of mp4

Question

Using HTML5 I am trying to get the attribute (ie rotation), located in the header of a mp4 (I play it using a video tag), to do this I am trying to get the bytes that make up the header, and knowing the structure, find this atom.

Does anyone know how to do this in javascript?

Analyse

Answer 1

I do not think you can extract such detailed metadata from a video, using HTML5 and its video-tag. The only things you can extract (video length, video tracks, etc.) are listed here:

http://www.w3schools.com/tags/ref_av_dom.asp

Of course, there might be special additional methods available in some browsers, but there is no "general" approach - you would need more than the existing methods of HTML5.

Dormeuse

Mmm... with images we can, but no with videos... so bad. :-/ Thanks for answer! I think it is needed, obtain all the bytes from a video to do advanced functions – Analyse

@BlackCid did you ever figure out how to do it? Aka reading out the metadata? I'm curious too to get info like video orientation. – Boomerang

Nope, it is impossible to get Finally I decided tosend the orientation from the origin as a variable to the server and store in the database with the video... – Analyse

Answer 2

You can use mediainfo.js, It's a porting of mediainfo (cpp) in javascript compiled with emsciptem.

Here is a working example: https://mediainfo.js.org/

You will need to include the js/mediainfo.js file and put mediainfo.js.mem file in the same folder.

You need to check the sources on this file to see how it works: https://mediainfo.js.org/js/mediainfopage.js

[...]

function parseFile(file) {
    if (processing) {
      return;
    }
    processing = true;
    [...]

    var fileSize = file.size, offset = 0, state = 0, seekTo = -1, seek = null;

    mi.open_buffer_init(fileSize, offset);

    var processChunk = function(e) {
      var l;
      if (e.target.error === null) {
        var chunk = new Uint8Array(e.target.result);
        l = chunk.length;
        state = mi.open_buffer_continue(chunk, l);

        var seekTo = -1;
        var seekToLow = mi.open_buffer_continue_goto_get_lower();
        var seekToHigh = mi.open_buffer_continue_goto_get_upper();

        if (seekToLow == -1 && seekToHigh == -1) {
          seekTo = -1;
        } else if (seekToLow < 0) {
          seekTo = seekToLow + 4294967296 + (seekToHigh * 4294967296);
        } else {
          seekTo = seekToLow + (seekToHigh * 4294967296);
        }

        if(seekTo === -1){
          offset += l;
        }else{
          offset = seekTo;
          mi.open_buffer_init(fileSize, seekTo);
        }
        chunk = null;
      } else {
        var msg = 'An error happened reading your file!';
        console.err(msg, e.target.error);
        processingDone();
        alert(msg);
        return;
      }
      // bit 4 set means finalized
      if (state&0x08) {
        var result = mi.inform();
        mi.close();
        addResult(file.name, result);
        processingDone();
        return;
      }
      seek(l);
    };

    function processingDone() {
      processing = false;
      $status.hide();
      $cancel.hide();
      $dropcontrols.fadeIn();
      $fileinput.val('');
    }

    seek = function(length) {
      if (processing) {
        var r = new FileReader();
        var blob = file.slice(offset, length + offset);
        r.onload = processChunk;
        r.readAsArrayBuffer(blob);
      }
      else {
        mi.close();
        processingDone();
      }
    };

    // start
    seek(CHUNK_SIZE);
  }

[...]
// init mediainfo
  miLib = MediaInfo(function() {
    console.debug('MediaInfo ready');
    $loader.fadeOut(function() {
      $dropcontrols.fadeIn();

      window['miLib'] = miLib; // debug
      mi = new miLib.MediaInfo();

      $fileinput.on('change', function(e) {
        var el = $fileinput.get(0);
        if (el.files.length > 0) {
          parseFile(el.files[0]);
        }
      });
    });

Here is the Github address with the sources of the project: https://github.com/buzz/mediainfo.js

Clevelandclevenger

Answer 3

Use this kind of methods without using an other dependencies can give full freedom to maintain the project in future.

document.querySelector('form').addEventListener('submit', function (e) {
    e.preventDefault();
    const video = document.querySelector('#video').files[0];
    const videoUrl = URL.createObjectURL(video);
    const videoElement = document.createElement('video');
    videoElement.src = videoUrl;
    videoElement.onloadedmetadata = function () {
        const videoInfo = document.querySelector('#videoInformation');
        const videoInfoElement = document.createElement('div');
        videoInfoElement.innerHTML = `
            <p>Duration: ${videoElement.duration} seconds</p>
            <p>Width: ${videoElement.videoWidth}</p>
            <p>Height: ${videoElement.videoHeight}</p>
        `;
        videoInfo.appendChild(videoInfoElement);
        URL.revokeObjectURL(videoUrl);
    };
});

Get input video file and output it meta data

Pointless