mediaInfo.js 获取视频详细信息，视频时长视频格式

mediaInfo.js 引入配置

官网的地址 https://github.com/buzz/mediainfo.js

通过两种方式引入

• npm: npm install mediainfo.js
• CDN:
  <script type="text/javascript src="https://unpkg.com/mediainfo.js/dist/mediainfo.min.js"></script>

官网没有关于vue的配置示例，但是有react+vite的示例，Webpack的也有

这里我就只展示vite的配置，如果是CDN引入的则不需要下方的配置，会自动访问MediaInfoModule.wasm文件

• npm安装好插件后，在vite.config.ts 文件中配置下方代码
  这里需要安装一个vite-plugin-static-copy 的vite插件，来拷贝MediaInfoModule.wasm的静态文件，mediaInfo是需要依赖这个文件执行的

import path from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteStaticCopy } from 'vite-plugin-static-copy'

export default defineConfig({
  plugins: [
    react(),
    viteStaticCopy({
      targets: [
        {
          src: path.join(__dirname, 'node_modules', 'mediainfo.js', 'dist', 'MediaInfoModule.wasm'),
          dest: '',
        },
      ],
    }),
  ],
})

引入访问不了的问题

在项目中我是用npm引入会报错说MediaInfoModule.wasm此文件找不到，上方的官方配置没有效果，CDN引入因为外网访问不了或者其他的原因，目前我是没有访问成功的，如果有知道是什么问题的还请帮忙提示一下,感谢😳

我们采用的解决方式是在index.html动态写入script标签访问自己云端存储的mediaInfo.js文件，mediaInfo.js文件是通过访问CDN网址拷贝下来的

<script>
  document.write(
    '<script id="mediaInfo" src="云端地址存储/mediainfo.min.js"><\/script>'
  )
</script>

怎么拷贝js文件放到云端存储

• 可以访问CDN的链接地址就能获取https://unpkg.com/mediainfo.js

• 之后https://unpkg.com/mediainfo.js@0.2.1/dist/umd/index.min.js将地址umd后缀改成MediaInfoModule.wasm就可以拿到MediaInfoModule.wasm的文件了https://unpkg.com/mediainfo.js@0.2.1/dist/MediaInfoModule.wasm

  默认是下载文件，打开文件就可以看到

存放文件时一定将MediaInfoModule.wasm文件放在mediainfo.js文件的上层文件夹中，mediainfo.js会默认访问上层文件
之后就在你自己的云端存储js文件，然后去访问就可以了

动态写入方式会出现的问题

项目中报警告，暂不影响就没处理

方法使用

• npm 安装的需要import mediaInfo { type MediaInfo } from 'mediainfo.js'"引入使用
• CDN / 动态写入脚本的 用我下方window访问就可以

使用的是vue3+ts语法

const windows: any = window
const checkMediaFile = (file: any): Promise<any> => {
  return new Promise((r, j) => {
    const getSize = () => file.size
    const readChunk = (chunkSize, offset) =>
      new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = (event: any) => {
          if (event.target.error) {
            reject(event.target.error)
          }
          resolve(new Uint8Array(event.target.result))
        }
        reader.readAsArrayBuffer(file.slice(offset, offset + chunkSize))
      })

    windows
      .MediaInfo()
      .then((media) => {
        media
          .analyzeData(getSize, readChunk)
          .then((result) => {
            console.log(result);
            return result
          }).catch((error) => {
            j(error)
          })
      })
      .catch((error) => {
        j(error)
      })
  })
}

打印结果 ： media里面是所有视频信息，creatingLibrary是mediaInfo的版本信息

webpack vue配置

如果有需要webpack配置的可以看这篇，这个博主分享的还是挺详细的 https://juejin.cn/post/7127846063792193573