【web前端】用video标签获取视频的时长

作者: 林哥学前端 | 来源:发表于2020-07-01 11:48 被阅读0次

用户上传视频时，要获取用户所选的视频的时长，如果太长就提示用户不能上传
通过video标签来获取视频的时长

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" id="file" />
    <script>
      let file = document.getElementById('file')
      file.addEventListener('change', function (e) {
        let file = e.target.files[0]
        let fileurl = URL.createObjectURL(file)
        let video = document.createElement('video')
        video.addEventListener('loadedmetadata', function (e2) {
          console.log(video.duration)
        })
        video.src = fileurl
      })
    </script>
  </body>
</html>