如何在上传之前获取 html 文件输入的视频分辨率？答案

【问题标题】：How can I get the video resolution on html file input before uploading?如何在上传之前获取 html 文件输入的视频分辨率？
【发布时间】：2020-07-28 17:33:03
【问题描述】：

当我在 HTML 文件输入中选择视频文件时，我想获取视频分辨率（宽度和高度）和所有元数据（大小、长度、文件类型等，如果可能的话）。我需要一个 js 或 jquery 解决方案为了这。我找不到与此主题相关的任何内容。帮我解决这个问题。提前致谢。

【问题讨论】：

标签： javascript jquery html forms html-input

【解决方案1】：

我找到了一种方法来做到这一点。我希望这对任何人都有用。

当一个视频文件添加到文件输入时我们创建一个新的视频元素并将该文件加载到视频的 src 属性中然后我们添加一个事件监听器到视频标签的loadedmetadata事件中，我们可以得到视频的高度和宽度。

<input type="file" class="file_multi_video">

<script>
    $(document).on("change", ".file_multi_video", function(evt) {
       const video = document.createElement('video')
       video.addEventListener('loadedmetadata', event => {
           console.log(video.videoWidth, video.videoHeight)
       });
       video.src = URL.createObjectURL(this.files[0]);
    });
</script>

【讨论】：

【解决方案2】：

查看描述 mediainfo.js 的这个答案。链接的演示似乎满足您的要求。

https://stackoverflow.com/a/56477757/12533555

【讨论】：