javascript HTML5 读取 mp4 的视频元数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18891921/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 read video metadata of mp4
提问by Black Cid
Using HTML5 I am trying to get the attribute (ie rotation), located in the header of a mp4 (I play it using a video tag), to do this I am trying to get the bytes that make up the header, and knowing the structure, find this atom.
使用 HTML5 我试图获取位于 mp4 标题中的属性（即旋转）（我使用视频标签播放它），为此我试图获取组成标题的字节，并知道结构，找到这个原子。
Does anyone know how to do this in javascript?
有谁知道如何在 javascript 中做到这一点？
采纳答案by olydis
I do not think you can extract such detailed metadata from a video, using HTML5 and its video-tag. The only things you canextract (video length, video tracks, etc.) are listed here:
我认为您无法使用 HTML5 及其视频标签从视频中提取如此详细的元数据。此处列出了您可以提取的唯一内容（视频长度、视频轨道等）：
http://www.w3schools.com/tags/ref_av_dom.asp
http://www.w3schools.com/tags/ref_av_dom.asp
Of course, there might be special additional methods available in some browsers, but there is no "general" approach - you would need more than the existing methods of HTML5.
当然，在某些浏览器中可能有特殊的附加方法可用，但没有“通用”方法——您需要的不仅仅是 HTML5 的现有方法。
回答by Val Entin
You can use mediainfo.js,
It's a porting of mediainfo(cpp) in javascript compiled with emsciptem.
您可以使用mediainfo.js，它是mediainfo(cpp) 在用 .js 编译的 javascript 中的移植emsciptem。
Here is a working example: https://mediainfo.js.org/
这是一个工作示例：https: //mediainfo.js.org/
You will need to include the js/mediainfo.jsfile and put mediainfo.js.memfile in the same folder.
您需要包含该js/mediainfo.js文件并将mediainfo.js.mem文件放在同一文件夹中。
You need to check the sources on this file to see how it works: https://mediainfo.js.org/js/mediainfopage.js
您需要检查此文件的来源以了解其工作原理：https: //mediainfo.js.org/js/mediainfopage.js
[...]
function parseFile(file) {
if (processing) {
return;
}
processing = true;
[...]
var fileSize = file.size, offset = 0, state = 0, seekTo = -1, seek = null;
mi.open_buffer_init(fileSize, offset);
var processChunk = function(e) {
var l;
if (e.target.error === null) {
var chunk = new Uint8Array(e.target.result);
l = chunk.length;
state = mi.open_buffer_continue(chunk, l);
var seekTo = -1;
var seekToLow = mi.open_buffer_continue_goto_get_lower();
var seekToHigh = mi.open_buffer_continue_goto_get_upper();
if (seekToLow == -1 && seekToHigh == -1) {
seekTo = -1;
} else if (seekToLow < 0) {
seekTo = seekToLow + 4294967296 + (seekToHigh * 4294967296);
} else {
seekTo = seekToLow + (seekToHigh * 4294967296);
}
if(seekTo === -1){
offset += l;
}else{
offset = seekTo;
mi.open_buffer_init(fileSize, seekTo);
}
chunk = null;
} else {
var msg = 'An error happened reading your file!';
console.err(msg, e.target.error);
processingDone();
alert(msg);
return;
}
// bit 4 set means finalized
if (state&0x08) {
var result = mi.inform();
mi.close();
addResult(file.name, result);
processingDone();
return;
}
seek(l);
};
function processingDone() {
processing = false;
$status.hide();
$cancel.hide();
$dropcontrols.fadeIn();
$fileinput.val('');
}
seek = function(length) {
if (processing) {
var r = new FileReader();
var blob = file.slice(offset, length + offset);
r.onload = processChunk;
r.readAsArrayBuffer(blob);
}
else {
mi.close();
processingDone();
}
};
// start
seek(CHUNK_SIZE);
}
[...]
// init mediainfo
miLib = MediaInfo(function() {
console.debug('MediaInfo ready');
$loader.fadeOut(function() {
$dropcontrols.fadeIn();
window['miLib'] = miLib; // debug
mi = new miLib.MediaInfo();
$fileinput.on('change', function(e) {
var el = $fileinput.get(0);
if (el.files.length > 0) {
parseFile(el.files[0]);
}
});
});
Here is the Github address with the sources of the project: https://github.com/buzz/mediainfo.js
这是包含项目来源的 Github 地址： https://github.com/buzz/mediainfo.js
