Question

我正在编写用于下载视频的用户脚本。该网站的Flash播放器使用JSON文件我的脚本的目的是通过根据网页下载和解析视频来获取视频的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"
    }

此处的两个网址都是相同的视频，这只是改变的分辨率。

那么，如何在不下载整个文件的情况下解析相关元数据？ 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获取文件信息，这是JS版本的ffmpeg（如果您计划使用其中任何一个，则应检查其许可证）。

＆＃13;

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';
}

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用纯ecmascript从MP4 URL获取视频高度和宽度，并且没有h.264的浏览器支持？

3 个答案: