H5 input video 自拍 获取视频时长时间 和大小 以上传限制 

限苹果手机，以下自测通过，安卓手机不支持 loadedmetadata

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="file" accept="video/*" capture="user" id='upload'>
<button onclick='getVideoTime()'>获取时长</button>
</body>
<script>
    function getVideoTime() {
      let fileVIdeo =  document.getElementById("upload")
      const pickOne =fileVIdeo.files[0]
      window.URL = window.URL || window.webkitURL
      const url = window.URL.createObjectURL(pickOne)
      const audioElement = new Audio(url)
      audioElement.addEventListener('loadedmetadata', (_event) => {
        const duration = audioElement.duration
        console.log('视频时长：' + duration + '秒')
        if (duration > 5) {
          this.$showToast('请控制录制时间在5秒之内')
          return
        }
        const size = pickOne.size / 1024 / 1000
        if (size > 5) {
          this.$showToast('视频文件过大，请控制在3秒之内')
          return
        }
        this.toCheckFace(event)
      })

    }
</script>
</html>

 

posted @ 2021-01-27 15:22  James2019  阅读(1899)  评论(0)  编辑  收藏  举报