Comment obtenir la hauteur et la largeur d'une vidéo à partir d'une URL MP4 avec ecmascript pur et sans le navigateur pour h.264?

Question

J'écris un script utilisateur pour télécharger des vidéos. Le lecteur flash du site Web utilise un fichier JSON.
Le but de mon script est d'obtenir l'url de la vidéo en téléchargeant et en analysant la vidéo en fonction de la page Web. Actuellement, il peut télécharger un extrait de l'URL des vidéos avec succès.

La partie importante de l'apparence du fichier JSON comme ceci:

{ 
     "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" 
    } 

Les deux URL ici sont de la même vidéo, ce juste est que la résolution du changement.

Alors, Comment puis-je analyser les métadonnées pertinentes sans télécharger le fichier entier? La norme pour le codec vidéo H.264 est très difficile à lire.

Answer 1

Vous pouvez utiliser l'en-tête HTTP Range via XMLHttpRequest pour obtenir seulement une partie du fichier:

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

Par exemple:

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 2

vous n'avez pas besoin de charger l'ensemble vidéo pour obtenir la hauteur:

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 3

J'utilise l'entête de gamme xhr à faire wnload contenu partiel, puis obtenir les informations de fichier en utilisant videoconverter.js, une version JS de ffmpeg (dont vous devez vérifier la licence si vous prévoyez d'utiliser l'un de ces).

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) { 
 
\t ffmpeg_run({ 
 
\t \t arguments: args, 
 
\t \t files: [{ 
 
\t \t \t name: 'myfile.mp4', 
 
\t \t \t data: fileData 
 
\t \t }], 
 
\t \t print: print, 
 
\t \t printErr: print \t 
 
\t }); \t 
 
}); 
 

 
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) { 
 
\t 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>