H5页面在IOS微信webview中无法校验视频文件时长问题

因业务需求需要一个图片视频文件上传功能，需支持主流浏览器及微信钉钉内置浏览器，遂考虑用一个简单的H5页面做上传客户端。视频上传因为要控制视频长度，在其他浏览器中都校验通过，但是在微信中却出了问题

const beforeRead = (file)=> {return new Promise((resolve,reject)=>{if(props.type == 'video'){let url = URL.createObjectURL(file)let audioElement = new Audio(url)audioElement.addEventListener("loadedmetadata", ()=>{let audioDuration = audioElement.duration;if(audioDuration>60){Toast(`仅支持上传1分钟时长以内视频`)reject()}else{resolve(file)}})}else{if (!['image/jpeg','image/png'].includes(file.type)) {Toast('所选文件格式不支持');reject()}else{resolve(file)}}})}

问题原因：IOS微信浏览器需要播放视频才能通过监听loadedmetadata事件获取视频长度，以下是解决办法：

const beforeRead = (file)=> {return new Promise((resolve,reject)=>{if(props.type == 'video'){let url = URL.createObjectURL(file)let audioElement = new Audio(url)audioElement.muted = trueaudioElement.play().then(()=>audioElement.pause())audioElement.addEventListener("loadedmetadata", ()=>{let audioDuration = audioElement.duration;if(audioDuration>60){audioElement.muted = falseToast(`仅支持上传1分钟时长以内视频`)reject()}else{audioElement.muted = falseresolve(file)}})}else{if (!['image/jpeg','image/png'].includes(file.type)) {Toast('所选文件格式不支持');reject()}else{resolve(file)}}})}

H5页面vue3.0+vant，参见upload组件不再赘述！

H5页面在IOS微信webview中无法校验视频文件时长问题相关推荐

H5页面在微信浏览器中自动播放视频
H5页面在微信浏览器中自动播放视频安卓和IOS不同 h5在安卓微信浏览器上的视频不能自动播放 h5在iOS微信浏览器上的视频可以自动播放 iOS的实现方案
react native利用webvView嵌入h5页面以及RN与webView的通信
前言:这边主要是记录下,在react native中如何使用h5页面,以及h5页面发生点击,或者跳转到react native时,如何与react native进行通信. 一.react native ...
前端如何在H5页面调起微信支付
在微信服务号开发的时候经常会遇到微信支付的功能实现,通过实际经验自己总结了一下,前端在H5页面调起微信支付有两种办法,一是利用内置对象,二是通过引用微信的js sdk,亲测都能支付成功,从写法上来看用 ...
移动端h5文字长按复制_移动端开发 H5 页面在 iOS手机上无法实现长按复制文本求解决...
移动端开发 H5 页面在 iOS手机上无法实现长按复制文本百度谷歌搜索的答案是 iOS手机系统自带需要设置禁用我们需求是要实现此功能可是我在手机测试并没有实现长按复制文本之前这样设置可以 ...
h5页面返回到微信首页
h5页面返回到微信首页等同于关闭当前打开页面使用微信内置WeixinJSBridge.call直接关闭 setTimeout(function() {//这个可以关闭安卓系统的手机document. ...
H5页面与ios交互返回上一级
H5页面与ios交互时,返回上一级不兼容,安卓兼容实现方法 (需要加return false) <a href="#" onclick="javascript: ...
app内嵌h5页面在ios手机端滑动卡顿的解决方法
app内嵌h5页面在ios手机端滑动卡顿的解决方法参考文章: (1)app内嵌h5页面在ios手机端滑动卡顿的解决方法 (2)https://www.cnblogs.com/1rookie/p/11 ...
js禁止苹果页面底部滚动_Vue.js 实现禁止 h5 页面在 ios 浏览器内置的下拉 bounce 效果...
介绍 vue-disbounce是一款基于Vue.js的自定义组件,可以有效避免触发h5页面在ios浏览器内置的下拉bounce效果. 组件 :style="{'background-col ...
苹果微信html音乐播放,HTML5教程在iOS微信浏览器中如何自动播放HTML5 audio
本篇教程探讨了HTML5教程在iOS微信浏览器中如何自动播放HTML5 audio,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html> Aut ...

H5页面在IOS微信webview中无法校验视频文件时长问题

H5页面在IOS微信webview中无法校验视频文件时长问题相关推荐

最新文章

热门文章