获取到的信息如图所示
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}`)
})
})
})
},