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

Posted 2023-03-05

【中文标题】如何在上传之前获取 html 文件输入的视频分辨率？

【英文标题】：How can I get the video resolution on html file input before uploading?

【发布时间】：2020-07-28 17:33:03

【问题描述】：

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

【参考方案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://***.com/a/56477757/12533555