Question

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

谢谢！

Answer 1

我担心这不太可能。为了使浏览器能够确定视频的大小，必须先加载它。

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

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

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

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

Answer 2

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

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

此外，重要的是要记住，只要有人正在观看视频，就无法访问文件来阅读元数据。因此，您真的希望正确配置ajax响应的caching。

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属性获取视频的高度（如果它在<video>元素上设置...

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

使用jQuery确定视频文件大小

4 个答案: