如何使用純ecmascript從MP4 URL獲取視頻高度和寬度，並且沒有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

你不需要加載整個視頻來獲得高度：

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

您可以通過XMLHttpRequest使用Range HTTP標頭只獲取文件的一部分：

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 3

我使用xhr范圍標題下載部分內容，然后使用videoconverter.js獲取文件信息，fidempverte.js是ffmpeg的JS版本（如果您計划使用其中任何一個，則應檢查其許可證）。

 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>