vue 上传前获取到视频或音频的详细信息,例如帧速率,比特率等等,用mediainfo实现(暂时记录)

获取到的信息如图所示
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}`)
                  })
              })
            })
          },
Vue获取视频文件的格式、文件大小、分辨率、率、比特率、时长、编码、音频声道、音频采样率、音频比特率以及音频编码等信息,可以借助 HTML5 中的 `<video>` 元素和 JavaScript 来实现。下面是一个示例代码: ```html <template> <div> <input type="file" @change="handleFileChange" accept="video/*"> <video ref="videoPlayer" controls></video> <div v-if="videoInfo"> <p>格式: {{ videoInfo.format }}</p> <p>文件大小: {{ videoInfo.fileSize }}</p> <p>分辨率: {{ videoInfo.resolution }}</p> <p>率: {{ videoInfo.frameRate }}</p> <p>比特率: {{ videoInfo.bitRate }}</p> <p>时长: {{ videoInfo.duration }}</p> <p>编码: {{ videoInfo.encoding }}</p> <p>音频声道: {{ videoInfo.audioChannels }}</p> <p>音频采样率: {{ videoInfo.audioSampleRate }}</p> <p>音频比特率: {{ videoInfo.audioBitRate }}</p> <p>音频编码: {{ videoInfo.audioEncoding }}</p> </div> </div> </template> <script> export default { data() { return { videoInfo: null }; }, methods: { handleFileChange(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = () => { this.$refs.videoPlayer.src = reader.result; this.getVideoInfo(file); }; reader.readAsDataURL(file); }, getVideoInfo(file) { const video = document.createElement('video'); video.preload = 'metadata'; video.onloadedmetadata = () => { window.URL.revokeObjectURL(video.src); this.videoInfo = { format: file.type, fileSize: file.size, resolution: video.videoWidth + 'x' + video.videoHeight, frameRate: video.frameRate, bitRate: video.bitRate, duration: video.duration, encoding: video.encoding, audioChannels: video.audioChannels, audioSampleRate: video.audioSampleRate, audioBitRate: video.audioBitRate, audioEncoding: video.audioEncoding }; }; video.src = URL.createObjectURL(file); } } }; </script> ``` 在上述示例中,通过 `<input type="file">` 元素选择视频文件,并将其赋值给 `<video>` 元素的 `src` 属性。然后使用 JavaScript 获取 `<video>` 元素的相关属性,从而获得视频文件的各种信息。最后,将这些信息显示在页面上。 请注意,由于浏览器的安全限制,您可能无法直接获取视频文件的详细信息。在某些情况下,可能需要将视频文件上传到服务器端进行解析或使用第三方库来实现更精确的信息获取
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值