如何使用mediainfo.js来获取视频信息
安装
首先是安装改插件，这里GitHub中有很多介绍，这里介绍常用的node引入和CDN引入
Node.js 在npm上安装mediainfo.js
$ npm install -g mediainfo.js
后在需要的文件中
import MediaInfo from "mediainfo.js";
这样输出MediaInfo发现是如下方法则为引入成功：
ƒ MediaInfoFactory(opts, callback, errorCallback) { if (options === void 0) { options = {}; } if (callback === undefined) { return new Promise(function (resolve, reject) { …
CDN:
<script type="text/javascript" src="https://unpkg.com/mediainfo.js/dist/mediainfo.min.js"></script>
或者
<script type="text/javascript" src="https://unpkg.com/mediainfo.js/dist/mediainfo.js"></script>
同理插入script标签后输出MediaInfo发现是如下方法则为引入成功：
ƒ MediaInfoFactory(options, callback, errCallback) { if (options === void 0) { options = {}; } if (callback === undefined) { return new Promise(function (resolve, reject) { …
使用
在刚刚的输出中我们看到了这个库返回的是一个方法明子为MediaInfoFactory（媒体信息工厂）。从命名中可以看到是一个工厂函数来用来创建mediainfo实例的，且需要传入三个参数(opts, callback, errorCallback)
分别是选项，回调函数，失败回调函数。
opts = { chunkSize: 256*1024, coverData: false, format: 'object' }
chunkSize：使用的区块大小（以字节为单位）analyzeData
coverData：是否提取二进制封面数据（Base64 编码）
format：结果值的格式（选项：object``JSON``XML``HTML``text)
locateFile：用于覆盖位置的可选回调函数。必须返回文件的 URL/路径。如果您想从自定义位置提供服务，则非常有用。MediaInfo.wasmMediaInfoModule.wasm (url, scriptDirectory) => pathToFile
如果未给出回调，则返回 Promise。
这里直接创建实例
MediaInfo({ format: 'JSON' }, (mediainfo) => {
fileinput.addEventListener('change', ()=>onChangeFile(mediainfo))
})
同时在html（或者模板中）
创建
<input type="file" id="fileinput">
并
const fileinput = document.getElementById('fileinput')
以确保监听生效
那么onChangeFile方法里面又应该写什么呢
<!DOCTYPE html>
<html lang="en">
<input type="file" id="fileinput">
<p id="output"></p>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qqq</title>
</head>
<body>
<script type="text/javascript" src="https://unpkg.com/mediainfo.js/dist/mediainfo.js"></script>
<script>
console.log(MediaInfo);
const fileinput = document.getElementById('fileinput')
const output = document.getElementById('output')
function get_file_info(mediainfo, file) {
let getSize = () => file.size
let readChunk = (chunkSize, offset) => {
return new Promise((resolve, reject) => {
let reader = new FileReader()
reader.onload = (event) => {
if (event.target.error) {
reject(event.target.error)
}
resolve(new Uint8Array(event.target.result))
} reader.readAsArrayBuffer(file.slice(offset, offset + chunkSize))
})
}
return mediainfo.analyzeData(getSize, readChunk)
.then((result) => {
console.log(result);
output.innerHTML = `${result}`
})
.catch((error) => {
output.value = `${output.value}\n\nAn error occured:\n${error.stack}`
})
}
async function onChangeFile(mediainfo) {
if (fileinput.files.length >= 2) {
for (let i = 0; i < fileinput.files.length; i++) {
file = fileinput.files[i]
if (file) {
await get_file_info(mediainfo, file)
if (i + 1 == fileinput.files.length) {
return
}
}
}
} else {
file = fileinput.files[0]
if (file) {
await get_file_info(mediainfo, file)
}
}
}
MediaInfo({ format: 'JSON' }, (mediainfo) => {
fileinput.addEventListener('change', () => onChangeFile(mediainfo))
})
</script>
</body>
</html>