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>
 


 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章