浏览器通常会通过文件扩展名假设 mime 类型,在这两种情况下都是 mp4。
可以肯定的是,您可以检查文件的二进制内容。
示例
假设您已将文件加载到 ArrayBuffer 中,您可以首先为其创建一个灵活的视图(Uint32Array 不能用作缓冲区的长度必须是 4 字节对齐的,文件并非总是如此,并且 DataView 会为你做 big-endian 到 little-endian 的交换):
var view = new DataView(buffer); // buffer = ArrayBuffer
(更新:删除了“不需要的”第一次检查/用于我建议在任何情况下都使用的框大小。添加了更多详细信息。)
然后,检查 atom(MP4 file-format 使用“atoms”和“boxes”而不是像许多其他类似格式中的“chunks”)“ftyp”(0x66747970)以字节 4-8(大端)为单位:
if (view.getUint32(4) === 0x66747970) { // = "ftyp"
// ok, so far so good..
}
现在检查 什么这是 MP4 类型:
if (view.getUint32(8) === 0x64617368) { // = "dash"
// audio
}
else if (view.getUint32(8) === 0x6D703432) { // = "mp42"
// audio + video
}
我们现在可以为音频创建一个具有正确 mime 类型集的对象 URL:
var blob = new Blob([buffer], {type: "audio/mp4"});
var url = URL.createObjectURL(blob); // src for video/audio element
注意,您需要考虑许多其他类型(使用十六进制编辑器检查您期望的文件的实际值),您可能会想要使用带有indexOf() 的数组来检查多个可能的值:
var videoTypes = [0x6D703432, 0x69736F6D, ...]; // mp42, isom, ...
...
var type = view.getUint32(8);
if (videoTypes.indexOf(type) > -1) { /* ok! */ }
作为后备,您可以假设 video/mp4 用于未知的标头和类型,创建一个带有 video/mp4 作为 mime-type 的 blob 并让浏览器从那里处理文件。
有关偏移量和盒子长度的详细信息,请参见上面的链接。
工作演示
以下演示仅限于检查给定示例文件的类型。您当然需要扩展其他 MP4 类型(类型字段)以检查实际应用程序,例如使用一个用于音频类型的数组、一个用于视频等的数组。
加载其中一个文件以对其进行分析。
var inp = document.querySelector("input");
inp.onchange = function(e) {
var reader = new FileReader();
reader.onload = analyze;
reader.readAsArrayBuffer(e.target.files[0]);
};
function analyze(e) {
var buffer = e.target.result, view = new DataView(buffer), blob, url;
// check file type
if (view.getUint32(4) !== 0x66747970) { // = "ftyp"
alert("Not MP4 file!"); return
}
// check if audio or audio+video
if (view.getUint32(8) === 0x64617368) { // = "dash"
alert("Audio\n(See console for example url)");
blob = new Blob([buffer], {type: "audio/mp4"});
}
else if (view.getUint32(8) === 0x6D703432 || // = "mp42"
view.getUint32(8) === 0x69736F6D) { // = "isom"
alert("Video+Audio\n(See console for example url)");
blob = new Blob([buffer], {type: "video/mp4"});
}
else { // assume video/mp4
alert("Unsupported:\n0x" + (view.getUint32(8)).toString(16));
blob = new Blob([buffer], {type: "video/mp4"});
}
// convert blob to an URL that can be used with a video/audio element
url = (URL || webkitURL).createObjectURL(blob);
console.log("Copy and paste this into a tab, wo/quotes:", url);
}
Pick a MP4 file: <input type="file">