使用 jQuery 确定视频文件大小

Question

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

谢谢！

Answer 1

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

一种解决方案可能是，假设这甚至可以工作，首先加载视频而不指定高度和宽度，而是使用 CSS 隐藏视频、计算尺寸、销毁视频并在单击时使用正确的尺寸再次加载它。这将是极其低效的。

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

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

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

Answer 2

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

因此，我建议您一个简单的解决方案（实际上是一种解决方法）：在加载视频之前执行 $.ajax 请求。您的服务器将收到此请求并根据它可以访问的元数据返回大小。然后，在 ajax success 回调中，您将能够调整容器 height 并最终显示视频。

此外，还需要记住的是，每当有人观看视频时，访问文件来读取元数据并不是执行操作。因此，我们真的希望您能够正确配置 ajax 响应的缓存。

Answer 3

是的，您可以获取 videoWidth 和 videoHeight 属性 - 它们是与视频的元数据一起下载的，因此请确保不要对视频元素使用 preload="none"，因为它会阻止下载元数据，直到有人尝试播放视频。下面是使用 jquery 的方法：

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

Answer 4

您可以使用 height 属性获取视频的高度（如果它在 元素上设置...

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