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

Since the video size is in the file's metadata, I think you can only access it on the server. The streamed video isn't the full file itself and doens't arrive with any metadata.

So, I suggest you a simple solution (well, in fact a workaround): do an $.ajax request before loading the video. Your server will receive this request and returns the size based on the metadata that it can access. Then, on your ajax sucess callback you will be able to adjust the container height and finally shows the video.

Moreover, it's also important to remember that it isn't performative accessing the file to read metadata whenever someone is watching the video. So it's really wished that you correctly configure the caching of the ajax response.

Answer 2

Yes, you can get the videoWidth and videoHeight properties - they are downloaded with the video's metadata, so be sure not to use preload="none" with your video element as it prevents metadata from being downloaded 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 3

You could get the height of the video maybe using the height attribute (if it's set on the <video> element...

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

Answer 4

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.