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

最新推荐文章于 2022-06-15 12:02:08 发布

V_AYA_V

最新推荐文章于 2022-06-15 12:02:08 发布

阅读量865

点赞数

分类专栏： js vue 文章标签： javascript 微信 vue.js

本文链接：https://blog.csdn.net/V_AYA_V/article/details/124683810

版权

vue 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

17 篇文章 0 订阅

订阅专栏

因业务需求需要一个图片视频文件上传功能，需支持主流浏览器及微信钉钉内置浏览器，遂考虑用一个简单的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 = true
          audioElement.play().then(()=>audioElement.pause())
          audioElement.addEventListener("loadedmetadata", ()=>{
            let audioDuration = audioElement.duration;
            if(audioDuration>60){
              audioElement.muted = false
              Toast(`仅支持上传1分钟时长以内视频`)
              reject()
            }else{
              audioElement.muted = false
              resolve(file)
            }
          })
        }else{
          if (!['image/jpeg','image/png'].includes(file.type)) {
            Toast('所选文件格式不支持');
            reject()
          }else{
            resolve(file)
          }
        }
      })
    }