vue3获取视频时长、码率、格式等视频详细信息

前言:

我们在上传视频需要视频的帧数等信息的时候,上传组件无法直接读取帧数等信息

方法:通过mediainfo.js来获取视频的帧率、总帧数和视频的总时长

mediainfo.js地址,想详细了解的可以去看看
git地址:https://github.com/buzz/mediainfo.js

预览地址:mediainfo.js

解决方案:

1、通过npm:

1.1、运行以下命令:

javascript 复制代码
npm install mediainfo.js

官网没有关于vue的示例,但是有react+vite的示例,这里我是用vite配置

1.2、npm安装好插件后,在vite.config.ts 文件中配置下方代码

这里需要安装一个vite-plugin-static-copy 的vite插件

javascript 复制代码
npm install vite-plugin-static-copy --save 

1.3、拷贝MediaInfoModule.wasm的静态文件,mediaInfo是需要依赖这个文件执行的

javascript 复制代码
import * as path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteStaticCopy } from 'vite-plugin-static-copy'

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

++问题来了,在项目中我是用npm方式引入,运行提示MediaInfoModule.wasm文件找不到,添加的配置也没有效果,目前npm方式我没有配置成功,如果大家什么好的方法,还请指导一下,感谢++

2、使用CDN的方式:

1、在项目index.html文件 <body></body>标签**下,通过CDN的方式加入mediaInfo.js,如下**

javascript 复制代码
<script src="https://unpkg.com/mediainfo.js@0.2.1/dist/umd/index.min.js"></script>

2、使用**mediaInfo.js**

在需要获取视频信息的vue文件下使用,示例如下

javascript 复制代码
<template>
  <div class="container">
            <el-upload
                :on-change="handleVideoChange"
                accept="video/*"
                multiple >
                <el-button type="primary">
                  上传视频
                </el-button>
              </el-upload>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const handleVideoChange = (file)=>{
checkMediaFile(file.raw)
}

const loadingVideo  = ref(null);
  const windows: any = window
const checkMediaFile = (file: any): Promise<any> => {
  loadingVideo.value = ElLoading.service({
      text:'读取中...'
    }); // 开始加载
  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.media.track[1]);
            loadingVideo.value.close(); // 结束加载
            return result
          }).catch((error) => {
            j(error)
          })
      })
      .catch((error) => {
        j(error)
      })
  })
}
</script>

3、运行效果如下:

相关推荐
LNTON羚通2 小时前
摄像机视频分析软件下载LiteAIServer视频智能分析平台玩手机打电话检测算法技术的实现
算法·目标检测·音视频·监控·视频监控
y先森2 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy2 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189112 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿3 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡4 小时前
commitlint校验git提交信息
前端
虾球xz5 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇5 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒5 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员5 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js