Javascript 使用jQuery确定视频文件大小

我正在使用videojs播放html5视频，不同的维度。是否可以使用jQuery（或其他脚本语言）检测视频文件的高度/宽度，以便将其动态输入到嵌入代码中

---

谢谢

您可以使用height属性获取视频的高度（如果在

元素上设置了该属性

$('#idOfVideoElement').attr('height');

---

恐怕不太可能。为了让浏览器能够确定视频的大小，它必须先加载视频

一种解决方案是，假设这样做可行，首先加载视频，而不指定高度和宽度，但使用CSS隐藏视频，计算尺寸，销毁视频，然后使用正确的大小单击再次加载。这将是非常低效的

或者，您可以创建一个服务器端脚本（PHP/ASP/…）它读取视频文件，在最初保存内容时检测高度和宽度，并将高度和宽度保存到数据库中。然后，您可以在每个页面视图上从数据库中读取高度和宽度。虽然您可以让这样的脚本在每次请求时读取视频文件，但这将是低效的，并且会增加成本缩短生成页面所需的时间

如果您使用的是PHP，我强烈建议您查看一个免费的开源库，它可以用来解析多种类型的视频文件

---

另一个想法：另一个解决方案可能是不在嵌入代码中指定高度和宽度，让浏览器自行调整视频大小。然后可以调整lightbox的大小以修复视频容器。许多lightbox插件都有可以挂接的事件。

因为视频大小在文件的元数据中，所以我认为您只能在服务器上访问它。流式视频本身不是完整的文件，并且不附带任何元数据

因此，我建议您使用一种简单的解决方案（实际上是一种变通方法）：在加载视频之前执行

$.ajax

请求。服务器将收到此请求并根据其可以访问的元数据返回大小。然后，在ajax

成功

回调中，您将能够调整容器

高度

，并最终显示视频

---

此外，还必须记住，每当有人观看视频时，读取元数据并不是执行性的访问文件。因此，我们真的希望您正确配置ajax响应的

缓存
。
是的，您可以获得videoWidth和videoHeight属性-它们与视频的属性一起下载元数据，因此请确保不要对视频元素使用preload=“none”，因为它会阻止元数据在有人尝试播放视频之前被下载。以下是使用jquery的方法：

$(function(){
  $('video').bind('loadedmetadata', function(){
    var rawWidth = $(this).prop('videoWidth');
    var rawHeight = $(this).prop('videoHeight');
  });
});

我认为，如果你能更详细地描述一下情况，就更容易找到解决方案。我认为你应该使用jquery下载视频文件的一部分，然后使用videojs对其进行足够的解析，以告诉你文件的大小。如果你能在服务器端这样做，你的境况会好得多。看起来你已经很好地掌握了情况n、 ：）如果不进行部分下载，就无法从视频的元数据中获取该信息？在大多数视频容器（AVI/MP4/…）中，该信息位于文件前面附近的文件中。如果您有权访问服务器，则可以为视频文件创建新文件，其中只包含所需的元数据。如果没有，你需要下载一部分，或者让videojs下载一部分（如果可以的话）。我不确定的是你什么时候需要知道这个？听起来你想在播放之前知道视频文件的大小，对吗？当然。我正在使用JS将视频嵌入一个覆盖窗口（fancybox），因此我需要在同一次嵌入onClick时确定尺寸，理想情况下。不，这不起作用…我需要视频的尺寸，然后再嵌入。高度属性是我需要设置的高度。啊，好的，对不起，我误解了这个问题。我不确定html5视频api是否有检索视频高度和宽度的方法