上传前获取视频尺寸，客户端

Posted 2023-05-07

【中文标题】上传前获取视频尺寸，客户端

【英文标题】：getting video dimensions before upload, client-side

【发布时间】：2011-06-23 09:28:15

【问题描述】：

我有一个视频的上传表单。用户单击浏览并选择一个文件。如何在用户选择文件的那一刻（甚至在文件上传到服务器之前）获得视频尺寸。它显然必须是客户端的东西，可能是 javascript/jquery 或 flash/flex（虽然更喜欢 js//jquery），但是它们中的任何一个都可以这样做吗？

【参考方案1】：

不幸的是，简短的回答是您不能 - 您需要访问权限才能使用不允许的 javascript 扫描文件内容。更糟糕的是，即使你能以某种方式读取文件，你也需要在 JS 中实现一大堆编解码器才能读取头信息。

将此标记为不可能

【讨论】：

也许我不必读取文件本身，而是读取元数据。这种信息应该存储在那里，或者也许有人知道这样做的另一个技巧

我理解您的想法，但在大多数操作系统中，没有元数据 - 您所拥有的只是一个没有其他信息的文件。 Windows / 其他操作系统可以解析来自已知文件类型的简单数据，它们通过属性对话框/等公开。但是要播放视频，操作系统通常需要安装编解码器，而我从未听说过在 JS 中执行此操作的任何方法-此外，这将是一个巨大的安全问题-任何网站都可以读取有关您硬盘上任何文件的元数据磁盘...

【参考方案2】：

理论上你应该可以使用 FileReader API - https://developer.mozilla.org/en/DOM/FileReader

一旦文件被读取，您就可以解析出标题。据我所知，没有人在 javascript 中这样做过。

【讨论】：

+1 有趣的解决方案，但您仍然需要在 JS 中实现所有可能的编解码器才能真正理解容器/流标头 - 这听起来有点像一场噩梦。 +1 寻找可能的解决方案，但我认为它不可行......

【参考方案3】：

这是一个非常古老的问题，但现在可以在上传之前了解客户端的视频尺寸。

参考这个问题：html5 Video Dimensions

示例代码：

var v = document.getElementById("myVideo");
v.addEventListener( "loadedmetadata", function (e) 
    var width = this.videoWidth,
        height = this.videoHeight;
, false );

【讨论】：

在这种情况下如何加载带有本地文件的视频元素？

@Basic 您可以使用

【参考方案4】：

如果尺寸是分辨率：否

如果维度是文件大小：（现在）是：

Using jQuery, Restricting File Size Before Uploading