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 that matter) so that I can dynamically input these into the embed code?

Thanks!

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 that matter) so that I can dynamically input these into the embed code?

Thanks!

• javascript
• jquery
• html
• html5-video

Share Follow asked Jun 13, 2011 at 22:31 goddamnyouryangoddamnyouryan 6,9061515 gold badges5858 silver badges108108 bronze badges 4

• 2 I think it would be easier to e up with a solution if you describe the situation a little more. I'm thinking you would use jquery to download a portion of the video file and then use videojs to parse it enough to tell you the size. If you can do this server side, you would be much better off. – sleeves Commented Jun 13, 2011 at 22:40
• it seems like you have a good grasp on the situation. :) There's no way to grab that info from the metadata of the video, without partially downloading it? – goddamnyouryan Commented Jun 13, 2011 at 22:46
• In most video containers (AVI/MP4/...), this information is in the file, near the front of the file. If you have access to the server, you can create new files for your video files that contain just the metadata that you need. If not, somehow you need to download part of it, or let videojs download part of it (if it can). The part that I am unsure of is when do you need to know this? It sounds like you want to know the size of the video file before it is played, correct? – sleeves Commented Jun 13, 2011 at 22:54
• absolutely. i am using JS to embed the videos into an overlay window (fancybox) so i need to determine the dimensions during this same embed onClick, ideally. – goddamnyouryan Commented Jun 13, 2011 at 22:57

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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 remend 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.

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.

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');
  });
});

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

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