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

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

javascript 复制代码
   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);

相关推荐
你真是饿了4 分钟前
1.C++入门基础
开发语言·c++
天天进步20157 分钟前
Python全栈项目:实时数据处理平台
开发语言·python
Tipriest_8 分钟前
Python中is关键字详细说明,比较的是地址还是值
开发语言·python
sheji34169 分钟前
【开题答辩全过程】以 基于Python的餐饮统计系统的设计和实 现为例,包含答辩的问题和答案
开发语言·python
elseif12310 分钟前
【C++】并查集&家谱树
开发语言·数据结构·c++·算法·图论
catchadmin11 分钟前
2026 年 PHP 前后端分离后台管理系统推荐 企业级方案
开发语言·php
Byron070715 分钟前
从 0 到 1 搭建 Vue 前端工程化体系:提效、提质、降本实战落地
前端·javascript·vue.js
哆啦code梦18 分钟前
前端存储三剑客:localStorage、sessionStorage与Cookie解析
前端·前端存储
LGL6030A20 分钟前
Java学习历程26——线程安全
java·开发语言·学习
遨游xyz21 分钟前
排序-快速排序
开发语言·python·排序算法