Obtener ancho y alto de un video HTML5 con Javascript

Ahora que me toca desarrollar una aplicación con Canvas y Video de HTML5 me he topado con la necesidad de adaptar el lienzo al tamaño del video, que no es estático, porque depende de la resolución de cada usuario.

Lo anterior suena bastante sencillo, sin embargo no lo es tanto, a continuación te muestro como debería hacerse. Primero obviamente recolectamos el objeto.

Código :

window.addEventListener('load',init);
function init()
{
       var video = document.querySelector('video');
}

Uno podría esperar que hubiera un video.width o video.height, sin embargo, a alguien se le ocurrió una buena idea cambiar el nombre de esos atributos por los siguientes:

Código :

window.addEventListener('load',init);
function init()
{
       var video = document.querySelector('video');
       var video_height = video.videoHeight;
       var video_width = video.videoWidth;
}

Uno podrá pensar que no hay dificultad en ése script, sin embargo ejecutarlo nos devolvería 0 para ambos valores, ¿por qué? Porque generalmente ésta función se ejecuta cuando el video no ha cargado y no ha empezado a ejecutarse, por lo que debemos ejecutar ésto utilizando el evento loadedmetadata del objeto video.

Código :

var video,video_height, video_width;
window.addEventListener('load',init);
function init()
{
       video = document.querySelector('video');
       video.addEventListener("loadedmetadata", getSize, false);
}
function getSize()
{
       video_height = video.videoHeight;
       video_width = video.videoWidth;
}

Ahora sí, obtenemos los valores necesarios cuando el video se ha adaptado al tamaño de la ruta que el usuario envía. No sé qué tan común sea que el source del video sea de tamaño variable, pero sí requiere conocerlo, éste script puede ayudarlos.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.