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

使用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);

相关推荐
Rysxt_14 分钟前
Vuex 教程 从入门到实践
前端·javascript·vue.js
权泽谦20 分钟前
用 Python 做一个天气预报桌面小程序(附源码 + 打包与部署指导)
开发语言·python·小程序
ftpeak23 分钟前
《Rust+Slint:跨平台GUI应用》第八章 窗体
开发语言·ui·rust·slint
by__csdn29 分钟前
Node.js版本与npm版本的对应关系
前端·npm·node.js
森语林溪29 分钟前
大数据环境搭建从零开始(十七):JDK 17 安装与配置完整指南
java·大数据·开发语言·centos·vmware·软件需求·虚拟机
AI_56781 小时前
Webpack性能优化终极指南:4步实现闪电打包
前端·webpack·性能优化
lsx2024061 小时前
HTML 音频(Audio)详解
开发语言
woshihonghonga1 小时前
【动手学深度学习】
开发语言·python
xuehuayu.cn1 小时前
js es6 class 类中的值是异步赋值, 子类中如何获取这个值?
javascript·es6
威风的虫1 小时前
ES6 数组方法:告别循环,拥抱函数式编程
开发语言·前端·javascript