当前位置: 首页 > news >正文

视频上传,限制时长,获取视频时长

使用element的upload上传文件时,除了类型和大小,需求需要限制只能长传18秒内的视频,这里通过upload的before-upload,以及创建一个音频元素对象拿到durtaion时长属性来实现。

   getVideoTime(file) {return new Promise(async (resolve, reject) => {let url = URL.createObjectURL(file);let audioElement = new Audio(url);let durtaion = 0;audioElement.addEventListener('loadedmetadata', function () {durtaion = audioElement.duration;resolve(parseFloat(durtaion));});});},

loadedmetadata 事件是当指定的音频/视频的元数据已加载时触发,就可以得到元数据,包括时长,尺寸等;
 这里使用promise是因为加载音频元数据这是一个异步操作。

在上传文件之前的钩子里就可以拿到视频的时长做判断了,videoTimes的单位是秒。

     let videoTimes = await this.getVideoTime(file);

http://www.lryc.cn/news/133627.html

相关文章:

  • Open3D 进阶(5)变分贝叶斯高斯混合点云聚类
  • 5、css学习5(链接、列表)
  • Synchronized与Java线程的关系
  • 使用本地电脑搭建可以远程访问的SFTP服务器
  • 批量修改文件名怎么操作?
  • 【LeetCode】538.把二叉搜索树转换为累加树
  • linux 安装 kibana
  • STM32入门——IIC通讯
  • DTC 19服务学习2
  • 【腾讯云 TDSQL-C Serverless 产品体验】基于腾讯云轻量服务器以及 TDSQL-C 搭建 LNMP WordPress 博客系统
  • 【vue3】对axios进行封装,方便更改路由并且可以改成局域网ip访问(附代码)
  • Java IO流(三)线程模型
  • string(模拟实现与深拷贝)
  • 5.Vue_Element
  • 链路追踪jaeger
  • 神经网络基础-神经网络补充概念-42-梯度检验
  • <kernel>kernel 6.4 USB-之-hub_port_connect()分析
  • linux驱动学习3-外部中断
  • vue中的canvas插件
  • 分享图片 | 快速浏览网页资源,批量保存、一键分享图片
  • Programming abstractions in C阅读笔记:p123-p126
  • 自然语言处理从入门到应用——LangChain:链(Chains)-[通用功能:LLMChain、RouterChain和SequentialChain]
  • ElasticSearch-安装部署全过程
  • mathematica报错:Tag Plus is \ Protected
  • Python Django 模型概述与应用
  • Golang Gorm 更新字段 save update updates
  • springBoot 配置文件引入 redis 的相关参数说明
  • Docker的使用心得:简化开发与部署的利器
  • vue3 基于element plus对el-pagination进行二次封装
  • RuntimeError: result type Float can‘t be cast to the desired output type __int64报错解决方法