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

Question

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

Answer 1

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

当视频文件添加到文件输入时，我们创建一个新video元素并将文件加载到video'ssrc属性中。然后我们向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>