Leason12138

导航

如何使用mediainfo.js来获取视频信息

如何使用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>

posted on 2024-09-04 17:49  Leason12138  阅读(118)  评论(0)  编辑  收藏  举报