Using jQuery to determine the size of a video file

Question

I use videojs to play html5 videos of various sizes. Is it possible to determine the height / width of a video file using jQuery (or another scripting language) so that I can dynamically inject them into the embed code?

Thanks!

Answer 1

I am afraid that this is not entirely possible. In order for the browser to determine the size of the video, it must first download it.

One solution could be, assuming this would even work, first load the video without specifying the height and width, but using CSS to hide the video, calculate the dimensions, destroy the video and load it again when you right-click the size. That would be incredibly inefficient.

Alternatively, you can make a server-side script (PHP / ASP / ...) that reads the video file, determines the height and width when you first save the content, and save the height and width in the database, Then you can read the height and width from Databases on every pageview. Although you could make such a script to view the video file with each request, it would be inefficient and increase the time required to create the page.

If you use PHP, I highly recommend you look at ffmpeg-php , a free open source library that you can use to parse several types of video files.

Another thought: Another solution might be to not specify the height and width in the embed code and let the browser modify the video on its own. You can then resize the lightbox to fix the video container. Many Lightbox plugins have events that you can plug in.

Answer 2

Since the size of the video in the file metadata, I think you can only access it on the server. Streaming video is not a complete file and does not come with any metadata.

So, I offer you a simple solution (well, actually, a workaround): before downloading the video, execute the $.ajax request. Your server will receive this request and return a size based on the metadata that it can access. Then, with the ajax sucess you can configure the height container and finally show the video.

In addition, it is also important to remember that it is not the primary access to the file for reading metadata whenever someone watches a video. So you really wanted you to configure the caching ajax response correctly.

Answer 3

Yes, you can get the videoWidth and videoHeight properties - they are loaded using the video metadata, so do not use preload = "none" with your video element, since it prevents the loading of metadata until someone tries to play the video. Here's how to do it with jquery:

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

Answer 4

You can get the height of the video, possibly using the height attribute (if set in the <video> element ...

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