【亲测免费】 MediaInfo.js 使用教程

2026-01-18 10:06:27作者：尤峻淳Whitney

1. 项目的目录结构及介绍

MediaInfo.js 是一个用于解析多媒体文件信息的 JavaScript 库。以下是其主要目录结构及介绍：

dist/: 包含编译后的 JavaScript 文件，可以直接在浏览器中使用。
src/: 包含项目的源代码。
- MediaInfo/: MediaInfo 的核心代码。
- MediaInfoWorker/: 用于 Web Worker 的代码，可以在后台线程中处理多媒体文件。
- MediaInfoModule.js: 用于加载 WebAssembly 模块的代码。
test/: 包含测试文件，用于验证库的功能。
package.json: 项目的依赖和脚本配置文件。
README.md: 项目的说明文档。

2. 项目的启动文件介绍

MediaInfo.js 的启动文件是 dist/mediainfo.min.js。这个文件是编译后的 JavaScript 文件，可以直接在浏览器中引入并使用。以下是一个简单的使用示例：

<!DOCTYPE html>
<html>
<head>
  <title>MediaInfo.js 示例</title>
  <script src="path/to/mediainfo.min.js"></script>
</head>
<body>
  <input type="file" id="fileInput">
  <script>
    document.getElementById('fileInput').addEventListener('change', async function(event) {
      const file = event.target.files[0];
      const mediainfo = await MediaInfo();
      const result = await mediainfo.analyzeData(file);
      console.log(result);
    });
  </script>
</body>
</html>

3. 项目的配置文件介绍

MediaInfo.js 没有显式的配置文件，但可以通过 package.json 文件来管理项目的依赖和脚本。以下是 package.json 文件的部分内容：

{
  "name": "mediainfo.js",
  "version": "1.0.0",
  "description": "MediaInfo library for the web",
  "main": "dist/mediainfo.min.js",
  "scripts": {
    "build": "webpack",
    "test": "jest"
  },
  "dependencies": {
    "webpack": "^5.0.0"
  },
  "devDependencies": {
    "jest": "^27.0.0"
  }
}