Aprende a obtener las dimensiones de un vídeo cargado a través del reproductor de vídeo HTML5 con JavaScript.

En diferentes situaciones, es posible que debas recuperar las dimensiones de un video con JavaScript en tu sitio web (no del contenedor del video, sino del video en sí). Esto se puede hacer fácilmente cuando cargas el video en una etiqueta de video:

var videoElement = document.getElementById("video");

// Imprime la altura nativa del video
console.log(videoElement.videoHeight);

// Imprime el ancho nativo del video
console.log(videoElement.videoWidth);

Sin embargo, debes saber que esta información no se puede obtener de inmediato cuando se carga en la página, pues probablemente este devolverá un valor nulo, porque el video aún no se ha cargado. Por lo tanto, si deseas hacer esto correctamente, deberás adjuntar un detector de eventos al elemento de video, específicamente al evento loadedmetadata. El evento loadedmetadata ocurre cuando se han cargado los metadatos para el audio/video especificado. Los metadatos para audio / video constan de: duración, dimensiones (solo video) y pistas de texto. Puedes agregar el detector de eventos de esta manera:

var videoElement = document.getElementById("video");

videoElement.addEventListener('loadedmetadata', function(e){
    // Imprime la altura nativa del video
    console.log(videoElement.videoHeight);

    // Imprime el ancho nativo del video
    console.log(videoElement.videoWidth);
});

Ten en cuenta que esto obligará a tu código a volverse asíncrono, por lo que es posible que desees ajustar este código usando Promesas o convertirlo en una función asíncrona si no te gusta trabajar con devoluciones de metodos.

Happy coding ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores