Using jQuery to determine video file size

Question

I am using videojs to play html5 videos, of varying dimensions. Is it possible to detect the height/width of a video file using jQuery (or another scripting language for th

Answer 1

I'm afraid that's not quite possible. For the browser to be able to determine the size of the video, it has to load it first.

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

Alternatively, you could make a server-side script (PHP/ASP/...) that reads the video file, detects the height and width when you content is originally saved and save the height and width to a database. You would then be able to read the height and width from the database on every page view. While you could make such a script read the video file on every request instead, this would be inefficient and would increase the time required to generate the page.

If you're using PHP, I'd highly recommend you look at ffmpeg-php, a free and open-source library you can use to parse several type of videos files.

Another thought: Another solution could be to not specify the height and width in the embed code and let the browser size the video on it's own. You could then resize the lightbox to fix the video container. Many lightbox plugins have events that you can hook into.