Get dimensions of HTML5 video (playing region - not division) during playback

Question

I have a HTML video in a division. When the user changes the size of the HTML window the playing area of the video changes to maintain its aspect ratio leaving boarders around the video (depending on how the window is resized).

Is there a way of obtaining the dimensions of the actual playback region of the video within a division (not the division itself).

I've tried:

console.log($("#video").css("height"));

Where #video is the id of the video itself, but it seems to return the division height, not the video playback area.

This needs to happen within a window resize event handler:

    $( window ).resize(function() {
    //Detect playback window size
    }

score 0 · Accepted Answer · edited May 23 '17 at 11:45

My solution was to get the original video size (see HTML5 Video Dimensions) and then compute the height and width based on the original aspect ratio. The problem, as explained in that page, is that those dimensions are only retrieved after loading the metadata (which in my test page happened only after playing the video). The way to make the video load the metadata is to use the preload="metadata" attribute on the video tag.

The rest is just combining these:

var aspectratio=1;
resizeHandler();
$("video").on('loadedmetadata',function() {
 var width = this.videoWidth;
 var height = this.videoHeight;
 aspectratio=width/height;
 resizeHandler();
});

function dis(v) { return Math.round(v*100)/100; }

function resizeHandler() {
 var height=$('video').height();
 var width=$('video').width();
 var actualHeight=Math.min(height,width/aspectratio);
 var actualWidth=Math.min(width,height*aspectratio);
    $('#spnInfo').text('ratio: '+dis(aspectratio)+'  width: '+dis(width)+', height:'+dis(height)+'  ,actual width: '+dis(actualWidth)+', actual height:'+dis(actualHeight));
}

$(window).resize(resizeHandler);

$('#btnResize').click(function() {
  $('video').css({height:Math.random()*600+50,width:Math.random()*600+50});
  $(window).trigger('resize');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="btnResize" value="Resize" /><span id="spnInfo"></span><br/>
<video poster="http://corrupt-system.de/assets/media/sintel/sintel-trailer.jpg" controls=""
 preload="metadata" style="width:200px; height:500px">
 <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4">
    <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm" type="video/webm">
</video>

Get dimensions of HTML5 video (playing region - not division) during playback

1 Answers1