mediainfo.js使用复盘

Examples | mediainfo.js 官方举例页面

1.MediaInfo是什么

MediaInfo是一个能读取音频和视频文件并分析和输出音视频信息的工具，能输出的内容包括视频信息，音轨，字幕等。他是采用BSD协议（类似MIT）的开源项目，可以免费商业。

具体效果如下图，这是输出text形式的结果，还支持输出json，xml，和html。

const fileinput = document.getElementById('fileinput')
const output = document.getElementById('output')

const onChangeFile = (mediainfo) => {
  const file = fileinput.files[0]
  if (file) {
    output.value = 'Working…'

    const readChunk = async (chunkSize, offset) =>
      new Uint8Array(await file.slice(offset, offset + chunkSize).arrayBuffer())

    mediainfo
      .analyzeData(file.size, readChunk)
      .then((result) => {
        output.value = result
        // var jsonstr=JSON.parse(result);
        // const videoTrack = jsonstr.media.track.find(track => track['@type'] === 'Video');

        // // 提取CodecID
        // if (videoTrack) {
        //     const codecId = videoTrack.CodecID;
        //     console.log(`CodecID值为: ${codecId}`);
        // } else {
        //     console.log('未找到Video类型的轨道信息');
        // }
      })
      .catch((error) => {
        output.value = `An error occured:\n${error.stack}`
      })
  }
}
//format参数指定输出的类型
MediaInfo.mediaInfoFactory({ format: 'json' }, (mediainfo) => {
  fileinput.removeAttribute('disabled')
  fileinput.addEventListener('change', () => onChangeFile(mediainfo))
})

2.怎么使用

官网其实举例依旧很完善了，不过我用的是在网页直接引用，但我又不想引用CDN的链接。

1.直接下载官网静态页举例中的https://unpkg.com/mediainfo.js，放到自己项目下的目录中

2.在网页中引用

        <script src="../js/media/mediainfo.js" type="text/javascript"></script>

3.到这里问题来了，我直接没接触过这方面的东西，我以为直接引用就可以了，因为官方例子也就是这样。但是我下载到本地，发现报错缺少一个叫 MediaInfoModule.wasm 的文件。但是我在GitHub上和官网都没有找到这个文件。

那怎么办？此时我想到的举例的页面可以，那么CDN的链接是不是预加载了这个文件，然后使用浏览器，使用F12大法，果然在其中找到了这个文件。很好，反手一个另存为将文件放在了mediainfo.js的文件夹下

4.再次测试，问题还是存在，还是找不到文件，mediainfo.js提示在它的上级目录中没找到这个MediaInfoModule.wasm文件，但我又不想乱放文件。然后我在mediainfo.js搜MediaInfoModule.wasm找到了如下图的配置，将它的前面加上所在文件夹名称后，重新加载页面即可

至此 我在本地实现了正常调用mediainfo.js。