Как получить высоту и ширину видеоролика с URL-адреса MP4 с помощью чистого ecmascript и без поддержки браузера для h.264?

Question

Я пишу сценарий пользователя для загрузки видео. Flash-плеер веб-сайта использует JSON-файл.
Цель моего скрипта - получить URL-адрес видео, загрузив и разобрав видео в соответствии с веб-страницей. В настоящее время он может загрузить извлечение URL-адреса видео успешно.

Важная часть JSON файл выглядит следующим образом:

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

Оба URL здесь о том же видео, это просто только разрешение, которое изменение.

Итак, Как я могу проанализировать соответствующие метаданные без скачивания всего файла? Стандарт для видеокодека H.264: очень сложно читать.

Answer 1

Вы можете использовать заголовок Range HTTP, чтобы получить только часть файла с помощью XMLHttpRequest:

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

Например:

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

вам не нужно загружать весь видео, чтобы получить высоту:

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

Я использую заголовок диапазона xhr, чтобы сделать wnload частичный контент, а затем получить информацию о файле, используя videoconverter.js, версию JF ffmpeg (чью лицензию вы должны проверить, планируете ли вы использовать ее).

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>