HTML5 read mp4 metadata video

Question

Using HTML5, I try to get the attribute (i.e. rotation) located in the mp4 header (I play it with the video tag) to do this, I try 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?

Answer 1

I don’t think you can extract such detailed metadata from a video using HTML5 and its video tag. Only those that you can extract are listed here (video length, video tracks, etc.):

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

Of course, some browsers may have special additional methods, but there is no "general" approach - you will need more than the existing HTML5 methods.

Answer 2

You can use mediainfo.js , This is a mediainfo (cpp) mediainfo 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 the mediainfo.js.mem file in the same folder.

You need to check the sources in 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