获取到的信息如图所示
git地址:https://github.com/buzz/mediainfo.js
预览地址:https://mediainfo.js.org/
在这里插入图片描述
vue实现代码如下

npm install mediainfo.js

使用copy-webpack-plugin将MediaInfoModule.wasm拷贝到构建路径

const CopyPlugin = require('copy-webpack-plugin')
const wasmFile = resolve('node_modules/mediainfo.js/dist/MediaInfoModule.wasm')

配置webpack plugin

  configureWebpack: {
    plugins: [
      // npm run dev 时拷贝到dist目录下
      new CopyPlugin([{ from: wasmFile, to: '.' }])
    ]
  }

因为MediaInfoModule.wasm加载需要时间,(建议让后端做下缓存)我是直接在main.js引入

import mediainfo from 'mediainfo.js'
Vue.prototype.mediainfo = mediainfo

然后就可以使用了
我用的是element的框架

<el-upload :action="imageUrl + '/file/upload'" :data="{ module: 'img' }" :name="'cltFile'" :show-file-list="false" :on-progress="fileProcess ":on-success="fileSuccess":before-upload="fileBefore">
<el-button size="small" type="primary" @click="uploadImgButton('xcxShareImage', infoFrom, '')" >小程序分享图</el-button > </el-upload>
//在上传前的回调函数可以取到file对象

//script
fileBefore(file){
this.getVideoBitRate(file)
}
 getVideoBitRate(file){
            let that = this
            return new Promise(function(resolve, reject){
              const getSize = ()=> file.size
              const readChunk = (chunkSize, offset) =>
                new Promise((resolve, reject) => {
                  const 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))
                })
                that.mediainfo().then((mediainfo) => {    
                   mediainfo
                  .analyzeData(getSize, readChunk)
                  .then( result => {
                    console.log(result)
                    if (result['media'] !== undefined) {
                      let track = result['media']['track']
                      console.log(track)
                      if (track !== undefined) {
                        for (let i = 0; i < track.length; i++) {
                          if (track[i]['@type'] === 'Audio' ) {
                            resolve(track[i].BitRate)//返回对应的音频比特率
                          }
                        }
                      }
                    }
                    resolve()
                  })
                  .catch((error) => {
                    reject(error)
                    console.log(`An error occured:\n${error.stack}`)
                  })
              })
            })
          },
Logo

鸿蒙生态一站式服务平台。

更多推荐