微信h5实现上传不低于30s

实现思路:上传视频前校验格式以及视频秒数是否在合理范围,是则上传到相对应的服务器上

HTML

 <input type="file" id="videoInput" accept="video/*" @change="checkVideoDuration"/>

JS

 // 检验格式与市场时长checkVideoDuration() {let that = this;let file = document.getElementById("videoInput").files[0];if (file.type.split("/")[0] !== "video") {this.$toast.fail("请上传视频格式");return;}let video = document.createElement("video");video.preload = "metadata";// 当视频的元数据加载完成后,会触发loadedmetadata事件video.onloadedmetadata = function () {window.URL.revokeObjectURL(video.src);if (video.duration >= 30) {that.upLoadVideo();// 允许上传操作} else {that.$toast.fail("请上传大于30s的视频哦");// 阻止上传操作event.preventDefault();}};video.src = URL.createObjectURL(event.target.files[0]);
}// 上传视频upLoadVideo() {let that = this;if (this.uploadToken) {var input = document.getElementById("videoInput");var file = input.files[0];let formData = new FormData();formData.append("file", file);formData.append("token", this.uploadToken);axios.post("你的服务器地址", formData).then((response) => {that.$toast.success("视频上传成功");}).catch((error) => {that.$toast.fail("上传失败,请重新上传");});}},

在安卓机一切都很正常,但ios手机连loadedmetadata方法都没进入

想到的解决办法是先自动播放后立马暂停,然后回去视频的描述,但是由于微信h5是禁止了视频自动播放的,这方法不可行,最后使用vant插件结合异步操作解决了这个问题

HTML

 <van-uploader :after-read="afterRead" :before-read="beforeRead" :file-list="fileList" type="file" accept="video/*"/>

JS

 beforeRead(file) {let that = this;if (file.type.split("/")[0] !== "video") {this.$toast.fail("请上传视频格式");return false;}var url = URL.createObjectURL(file);var audioElement = new Audio(url);var result;audioElement.muted = true;audioElement.play().then(() => audioElement.pause());return new Promise((resolve, reject) => {audioElement.addEventListener("loadedmetadata", function () {// 视频时长值的获取要等到这个匿名函数执行完毕才产生result = audioElement.duration; //得到时长为秒,小数,182.36console.log(result);var serce = parseInt(result);if (serce < 30) {that.$toast.fail("视频时长不得低于30秒");reject();} else {that.loadingShow = true;resolve();}});});},// 视频上传后的处理afterRead(file) {let that = this;const { fileList } = this;let formData = new FormData();formData.append("file", file.file);axios.post("接口地址", formData).then((response) => {that.$toast.success("视频上传成功");}).catch((error) => {that.$toast.fail("上传失败,请重新上传");});},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/802653.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MAC苹果电脑如何使用Homebrew安装iperf3

一、打开mac终端 找到这个终端打开 二、终端输入安装Homebrew命令 Homebrew官网地址&#xff1a;https://brew.sh/ 复制这个命令粘贴到mac的终端窗口&#xff0c;然后按回车键 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/in…

引领教育变革:山海鲸可视化智慧教育方案

随着信息技术的迅猛发展&#xff0c;教育领域正迎来一场深刻的变革。山海鲸可视化智慧教育解决方案&#xff0c;以其创新的技术和丰富的应用场景&#xff0c;正成为推动教育现代化进程的重要力量。 山海鲸可视化智慧教育解决方案是一套集教学、管理、服务于一体的综合性教育系…

Vue的模块化开发初探

文章目录 Vue的模块化开发初探一 概述二 步骤2.1 下载必须模块2.2 安装Live Server插件2.3 编写代码2.4 运行结果 三 总结四 参考资料 Vue的模块化开发初探 一 概述 Vue是一个渐进式JavaScript框架&#xff0c;可以按需引入部分功能&#xff0c;而不必全量引入整个框架。 二…

【机器学习】一文掌握机器学习十大分类算法(上)。

十大分类算法 1、引言2、分类算法总结2.1 逻辑回归2.1.1 核心原理2.1.2 算法公式2.1.3 代码实例 2.2 决策树2.2.1 核心原理2.2. 代码实例 2.3 随机森林2.3.1 核心原理2.3.2 代码实例 2.4 支持向量机2.4.1 核心原理2.4.2 算法公式2.4.3 代码实例 2.5 朴素贝叶斯2.5.1 核心原理2.…

图论做题笔记:bfs

Leetcode - 433:最小基因变化 题目&#xff1a; 基因序列可以表示为一条由 8 个字符组成的字符串&#xff0c;其中每个字符都是 A、C、G 和 T 之一。 假设我们需要调查从基因序列 start 变为 end 所发生的基因变化。一次基因变化就意味着这个基因序列中的一个字符发生了变化…

X86汇编速成

平时用的电脑都是X86的&#xff0c;但是现在大家都在搞RISC-V&#xff0c;计组也都开始以RISC-V作为示例&#xff0c;所以专门回头来补一下X86的汇编&#xff0c;方便平时使用。 寄存器register X86_64中一共有16个64位的通用寄存器&#xff0c;分别为&#xff1a; RAX, RBX,…

【鸿蒙开发】if/else条件渲染,ForEach循环渲染

if/else 使用规则 支持if、else和else if语句。if、else if后跟随的条件语句可以使用状态变量。允许在容器组件内使用&#xff0c;通过条件渲染语句构建不同的子组件。条件渲染语句在涉及到组件的父子关系时是“透明”的&#xff0c;当父组件和子组件之间存在一个或多个if语句…

磁盘管理与文件管理

文章目录 一、磁盘结构二、MBR与磁盘分区分区的优势与缺点分区的方式文件系统分区工具挂载与解挂载 一、磁盘结构 1.硬盘结构 硬盘分类&#xff1a; 1.机械硬盘&#xff1a;靠磁头转动找数据 慢 便宜 2.固态硬盘&#xff1a;靠芯片去找数据 快 贵 硬盘的数据结构&#xff1a;…

基于C语言的数据结构--顺序表讲解及代码函数实现展示

本篇文章是数据结构的开篇&#xff0c;所以我们先来了解一下什么是数据结构。 什么是数据结构 数据结构是由“数据”和“结构”两个词组合而来&#xff0c;自然要以两个词分别去阐述。 首先&#xff0c;什么是数据&#xff1f;数据(data)是事实或观察的结果&#xff0c;是对客…

golang实现定时监控 CLOSE_WAIT 连接的数量

文章目录 go实现定时检查大量的 CLOSE_WAIT 连接背景&#xff1a;为什么监控指定端口上的 CLOSE_WAIT 连接数量原因&#xff1a;什么是CLOSE_WAITgo实现定时检查大量的 CLOSE_WAIT 连接参考 go实现定时检查大量的 CLOSE_WAIT 连接 监控指定端口的连接状态&#xff0c;特别是关…

环境变量设置

环境变量具有用户属性&#xff0c;设置环境变量有四种方式 1、暂时的添加环境变量PATH_NAME&#xff1a;仅对当前进程有用&#xff0c;进程结束后自动释放 可通过export命令&#xff0c;如 export PATH_NAME/usr/local/nginx/sbin/:$PATH_NAME&#xff0c;将/usr/local/ngin…

C++中的string设计成模板的原因

查看string的文档可以发现&#xff0c;string被设计成模板&#xff0c;为什么这样设计呢&#xff1f; string文档链接&#xff1a;<string> - C Reference (cplusplus.com) 随着计算机的发展&#xff0c;出现了很多编码&#xff08;用于管理字符&#xff09;&#xff0c…

K8S容器空间不足问题分析和解决

如上图&#xff0c;今天测试环境的K8S平台出现了一个问题&#xff0c;其中的一个容器报错&#xff1a;Free disk space below threshold. Available: 3223552 bytes (threshold: 10485760B)&#xff0c;意思服务器硬盘空间不够了。这个问题怎么产生的&#xff0c;又怎么解决的呢…

十六进制颜色值对应的百分比

例如#ED242E这个颜色的30%的色值是多少? #ED242E4D 原来的色值HEX 百分比:0% HEX:00百分比:1% HEX:30百分比:2% HEX:50百分比:3% HEX:80百分比:4% HEX:A0百分比:5% HEX:D0百分比:6% HEX:F0百分比:7% HEX:12百分比:8% HEX:14百分比:9% HEX:17百分比:10% HEX:1A百分比:11% HEX:1…

力扣LCR143---子结构判定(先序递归、Java、中等题)

题目描述&#xff1a; 给定两棵二叉树 tree1 和 tree2&#xff0c;判断 tree2 是否以 tree1 的某个节点为根的子树具有 相同的结构和节点值 。 注意&#xff0c;空树 不会是以 tree1 的某个节点为根的子树具有 相同的结构和节点值 。 示例 1&#xff1a; 输入&#xff1a;tree…

抖店商家必看:“违规操作”扣除保证金2000块!这些细节要避免!

哈喽~我是电商月月 很多没经验的新手朋友开抖店都会遇到一个问题&#xff1a; 那就是开抖音小店时&#xff0c;因操作不当被扣除保证金的该怎么办&#xff1f; 实话实说&#xff0c;被判违规扣除保证金是能申诉的。但通过几率几乎是没有的 所以想要继续开店&#xff0c;只能…

蓝桥杯每日一题:日期差值(日期问题)

题目描述&#xff1a; 有两个日期&#xff0c;求两个日期之间的天数&#xff0c;如果两个日期是连续的我们规定他们之间的天数为两天。 输入格式 输入包含多组测试数据。 每组数据占两行&#xff0c;分别表示两个日期&#xff0c;形式为 YYYYMMDD。 输出格式 每组数据输出…

eclipse .project

.project <?xml version"1.0" encoding"UTF-8"?> <projectDescription> <name>scrm-web</name> <comment></comment> <projects> </projects> <buildSpec> <buil…

HarmonyOS 开发-短视频切换实现案例

介绍 短视频切换在应用开发中是一种常见场景&#xff0c;上下滑动可以切换视频&#xff0c;十分方便。本模块基于Swiper组件和Video组件实现短视频切换功能。 效果图预览 使用说明 上下滑动可以切换视频。点击屏幕暂停视频&#xff0c;再次点击继续播放。 实现思路 使用Sw…

Linux锁的使用

一、临界资源与临界区 多线程会共享例如全局变量等资源&#xff0c;我们把会被多个执行流访问的资源称为临界资源&#xff0c;我们是通过代码访问临界资源的&#xff0c;而我们访问临界资源的那部分代码称为临界区。 实现一个抢票系统 只有一个线程抢票时 #include <ios…