如何使用纯ecmascript从MP4URL获取视频高度和宽度,而不支持h.264浏览器
How to get video height and width from a MP4 URL with pure ecmascript and without browser support for h.264?
我正在编写一个用于下载视频的用户脚本。网站的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视频编解码器的标准是非常难以读取。
您不需要加载整个视频即可获得高度:
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"
您可以通过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.
我使用xhr范围标头下载部分内容,然后使用videoconverter.js获取文件信息,videoconverter.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>
相关文章:
- 任何浏览器都不支持javascript函数
- Javascript 错误:对象在 IE 浏览器中不支持此属性或方法
- 如何javascript验证<输入类型=文件多个>如果浏览器不支持多个
- IPAD safari 浏览器不支持 window.open JavaScript 方法
- 使用modernizr为不支持webgl的浏览器提供备用背景图像
- 如果浏览器不显示图像,如何显示图像;不支持HTML 5 Canvas
- 在Facebook图形中,使用Javascript的IE(所有版本)不支持API调用跨浏览器调用
- Black berry 5.1浏览器输入最大长度1不支持
- 在旧的移动浏览器中会发生什么;不支持vw或vh属性
- 在不支持的浏览器中替代IndexedDB?Safari/iOS Safari Chrome
- 如何获取浏览器不支持的 CSS 属性的值
- Android 原生浏览器不支持 JavaScript Regexp .match()
- 谷歌浏览器,JQuery - 显示不支持自动对焦
- Webkit 似乎不支持层上的 $.focus(),而 IE9 支持.无论如何,让webkit浏览器也这样做
- 什么浏览器不支持缓存清除
- Phantomjs 抛出“此页面使用框架,但您的浏览器不支持它们”错误,即使在设置了正确的用户代理后也是如此
- 响应字体:不支持的浏览器
- 在那些显然不支持此代码的浏览器中,有什么方法可以达到这种效果吗
- Firefox浏览器不支持菜单(点击显示)
- 当浏览器不支持HTML5历史API时,有条件地通过ajax加载history.js