How to get the height and width of a video from an MP4 URL with pure ecmascript and without browser support for h.264?

Question

I am writing a user script to upload a video. The website flash player uses a JSON file.
The purpose of my script is to get the URL of the video by downloading and parsing the video according to the web page. Currently, it can download extracting video URLs successfully.

The important part of the JSON file looks like this:

{ "ammProfile": "AMM-HBBTV", "version": "VF", "versionProg": "1", "VFO": "HBBTV", "VMT": "mp4", "VUR": "http://vo.llnwd.net/v2/am/HBBTV/051332-074-A_SQ_2_VF_01464306_MP4-2200_AMM-HBBTV.mp4" }, { "ammProfile": "AMM-HBBTV", "version": "VF", "versionProg": "1", "VFO": "HBBTV", "VMT": "mp4", "VUR": "http://vo.llnwd.net/v2/am/HBBTV/051332-074-A_EQ_2_VF_01464315_MP4-1500_AMM-HBBTV.mp4" } 

Both URLs here refer to the same video, it's just a change that changes.

So, How can I analyze the relevant metadata without downloading the whole file? The standard for the H.264 video codec is very difficult to read.

Answer 1

you don’t need to upload all the videos to get the height:

 function getVideoHeight(url, fnCallback){ var video=document.createElement("video"); video.autoplay=true; video.oncanplay=function(){ fnCallback(this.offsetWidth, this.offsetHeight); this.src="about:blank"; document.body.removeChild(video); }; document.body.appendChild(video); video.src=url; } //test: getVideoHeight( "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", function(w,h){ alert( w+"X"+h); } ); // shows: "640X360" 

Answer 2

You can use the Range HTTP header through XMLHttpRequest to get only part of the file:

http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html

For instance:

 xhr.setRequestHeader ('Range', 'bytes=0-' + (fragment_size - 1)) xhr.setRequestHeader ('Content-Length', fragment_size) // This part isn't absolutely required on most (all?) browsers. 

Answer 3

I use the xhr range header to download partial content, and then get the file information using videoconverter.js , the version of JF ffmpeg (whose license you should check to see if you plan to use any of them).

 var videoUrl = 'https://dl.dropboxusercontent.com/u/17698405/bla.mp4'; var cmd = '-i myfile.mp4'; var args = parseArguments(cmd); var sizeToDownload = 200*1024; retrieveVideo(videoUrl, sizeToDownload, function(fileData) { ffmpeg_run({ arguments: args, files: [{ name: 'myfile.mp4', data: fileData }], print: print, printErr: print }); }); function parseArguments(text) { text = text.replace(/\s+/g, ' '); var args = []; text.split('"').forEach(function(t, i) { t = t.trim(); if ((i % 2) === 1) { args.push(t); } else { args = args.concat(t.split(" ")); } }); return args; } function retrieveVideo(path, fragment_size, callback) { var xhr = new XMLHttpRequest(); xhr.open("GET", path, true); xhr.responseType = "arraybuffer"; xhr.setRequestHeader ('Range', 'bytes=0-' + (fragment_size - 1)); xhr.onload = function (oEvent) { var arrayBuffer = xhr.response; if (arrayBuffer) { callback(new Uint8Array(arrayBuffer)); } }; xhr.send(null); } var textarea = document.getElementsByTagName('textarea')[0]; function print(text) { textarea.value += '> ' + text + '\n'; } 

 * { box-sizing: border-box } html,body { height: 100%; margin: 0; padding: 0; overflow: hidden } textarea { width: 100%; height: 100%; } 

 <script src="https://rawgit.com/bgrins/videoconverter.js/master/build/ffmpeg-all-codecs.js"></script> <textarea></textarea>