关于javascript:js获取上传视频时长分辨率尺寸格式大小

6次阅读

共计 2664 个字符，预计需要花费 7 分钟才能阅读完成。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 上传视频 </title>
  <style>
    #bar-warp {
      width: 500px;
      height: 30px;
      border: 1px solid green;
    }
    #bar {
      width: 0px;
      height: 30px;
      background: green;
    }
  </style>
</head>
<body>
  <div id="bar-warp">
    <div id="bar"></div>
  </div>
  <span id="precent"></span>
  <br />
  <input type="file" onchange="changeFile(event)" />
  <script>
    async function changeFile(e) {
      let files = e.target.files
      // await checkSize(files,true--> 为音频是应用 默认为 false), '返回值、外面有（尺寸宽 --- 分辨率）尺寸高 视频时长 1 示意 1 秒   尺寸比例 [16,9]'; 
      let checkSizes
      if (files[0].type == "audio/mpeg") {checkSizes = await checkSize(files, true)

      } else if (files[0].type == "video/mp4") {checkSizes = await checkSize(files)
      }
      if (checkSizes.duration > 300) {console.log('视频上传工夫不能大于 5 分钟')
        return
      }
      if (checkSizes.videoWidth != 1280 && checkSizes.videoHeight <= 720) {console.log('只能视频上分辨率为 720')
        return
      }
      if (checkSizes.ccbl.join(':') != '16:9') {console.log('上传尺寸为 16:9 的视频')
        return
      }
      var pic = files[0]
      var fd = new FormData();
      var xhr = new XMLHttpRequest();
      // 这里写接口
      xhr.open('post', 'aa', true);
      xhr.onreadystatechange = function () {
        //readystate 为 4 示意申请已实现并就绪
        if (this.readyState == 4) {document.getElementById('precent').innerHTML = this.responseText;
          // 在进度条下方插入百分比
        }
      }
      xhr.upload.onprogress = function (ev) {
        // 如果 ev.lengthComputable 为 true 就能够开始计算上传进度
        // 上传进度 = 100* ev.loaded/ev.total
        if (ev.lengthComputable) {
          var precent = 100 * ev.loaded / ev.total;
          console.log(precent);
          // 更改进度条，及百分比
          document.getElementById('bar').style.width = precent + '%';
          document.getElementById('precent').innerHTML = Math.floor(precent) + '%';
        }
      }
      fd.append('pic', pic);
      xhr.send(fd);
    }
    // 获取最大公约数
    function getGcd(a, b) {
      let n1, n2;
      if (a > b) {
        n1 = a;
        n2 = b;
      } else {
        n1 = b;
        n2 = a;
      }
      let remainder = n1 % n2;
      if (remainder === 0) {return n2;} else {return getGcd(n2, remainder)
      }
    }
    // 创立虚构 dom 并且放回对应的值
    let checkSize = async (files, isVideo) => {if (!files || !files[0]) return false
      const checktimevideo = document.getElementById('checktimevideo')
      if (checktimevideo) {document.body.removeChild(checktimevideo)
      }
      let doms
      if (!isVideo) {doms = document.createElement('video')
      } else {doms = document.createElement('audio')
      }
      const url = URL.createObjectURL(files[0])
      console.log(url)
      doms.src = url
      doms.id = 'checktimevideo'
      doms.style.display = 'none'
      document.body.appendChild(doms)
      return await gettime(doms);
    }
    let gettime = (doms) => {
      // 因为 loadedmetadata 是异步代码所以须要 promise 进行封装转换为同步代码执行
      const promise = new Promise(resolve => {
        doms.addEventListener('loadedmetadata', e => {const gcd = getGcd(e.target.videoWidth, e.target.videoHeight);
          console.log(gcd)
          let obj = {
            videoWidth: doms.videoWidth, // 尺寸宽 --- 分辨率
            videoHeight: doms.videoHeight, // 尺寸高
            duration: e.target.duration, // 视频时长 1 示意一秒
            ccbl: [e.target.videoWidth / gcd, e.target.videoHeight / gcd] // 计算尺寸比例
          }
          resolve(obj)
        })
      })
      return promise
    }
  </script>
</body>
</html>

正文完