<video> and onloadedmetadata-event

Question

I\'d like to use the dimensions of a HTML5 video element in JavaScript. The video-tag itself does not have any dimensions set, so I expect it to scale to the size o

Answer 1

Put your code into a function at the end of your HTML head (e.g. called init) and bind it to the DOMContentLoaded event:

function init() {
    var video = document.getElementById('viddy');
    video.onloadedmetadata = function(e){
        var dimensions = [video.videoWidth, video.videoHeight];
        alert(dimensions);
    }
}

document.addEventListener("DOMContentLoaded", init, false);

For Chrome

You should change adding the listener to:

video.addEventListener('loadedmetadata', function(e){

function init() {
    var video = document.getElementById('viddy');
    video.addEventListener('loadedmetadata', function(e){
        var dimensions = [video.videoWidth, video.videoHeight];
        alert(dimensions);
    });
}

document.addEventListener("DOMContentLoaded", init, false);

With jQuery

$(document).ready(function() {
    $('#viddy').on('loadedmetadata', function() {
        var dimensions = [this.videoWidth, this.videoHeight];
        alert(dimensions);
    });
});