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

本文主要是介绍vue3获取视频时长、码率、格式等视频详细信息,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言:

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

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

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

解决方案:

1、通过npm:

1.1、运行以下命令:

npm install mediainfo.js

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

1.2、npm安装好插件后,在vite.config.ts 文件中配置下方代码
这里需要安装一个vite-plugin-static-copy 的vite插件

npm install vite-plugin-static-copy --save 

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

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,如下

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

2、使用mediaInfo.js

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

<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.sizeconst 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、运行效果如下:

这篇关于vue3获取视频时长、码率、格式等视频详细信息的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1142154

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢?我尝试一种更为智能的方法:P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验,

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优

使用Python实现获取网页指定内容

《使用Python实现获取网页指定内容》在当今互联网时代,网页数据抓取是一项非常重要的技能,本文将带你从零开始学习如何使用Python获取网页中的指定内容,希望对大家有所帮助... 目录引言1. 网页抓取的基本概念2. python中的网页抓取库3. 安装必要的库4. 发送HTTP请求并获取网页内容5. 解

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志?配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各