Al dar capacitaciones sobre HTML5, siempre dedico un tiempo importante para hablar de las bondades de los nuevos elementos de audio y video que se introducen en el estándar a partir de esta versión.
Su uso básico es bastante sencillo, pero su potencial es enorme, ya que siempre explico que no son solamente elementos semánticos sino que cuentan con una API que nos brinda un gran control sobre los medios que empleemos con estas etiquetas y también se pueden combinar con el Canvas de HTML5 para lograr efectos sorprendentes.
HTML5 Video y JavaScript
En esta oportunidad les voy a explicar como cambiar el tamaño de un video de una forma muy simple y efectiva. La manera más «obvia» y sencilla es por medio de los atributos width y height que soporta el elemento. Pero de esta manera no podríamos cambiarlo de manera dinámica.
¿Otra solución? Trabajar desde JavaScript sobre la API para cambiar el tamaño. Para quienes no se han metido aún con esta parte de la historia, no teman, no es nada difícil lo que vamos a hacer.
Antes de continuar, es importante conocer algunos aspectos importantes. El estándar nos provee el acceso a dos atributos que nos devolverán el alto y el ancho del video, ellos son: videoWidth y videoHeight. Aprovechando estos dos datos, podremos hacer una función que cambie proporcionalmente el tamaño de cualquier video.
Cambiar el tamaño de un video: ejemplo de código
Supongamos que deseamos tener un botón que nos muestre el video al doble de su tamaño. Esto lo podemos lograr llamando a una función como la siguiente:
function doble(){
document.getElementById("mivideo").height=(document.getElementById("mivideo").videoHeight*2);
} Esta función puede ser llamada desde un botón o desde cualquier elemento HTML que tenga asociado el evento onclick apuntado a la función doble(). Claro que para que funcione, debemos asegurarnos que el elemento video que deseamos escalar al doble de su dimensión, tanga la id mivideo (o la que deseemos asignarle). Si deseamos escalarlo a la mitad, en lugar de multiplicarlo por dos, lo dividimos por la misma cifra, es decir: /2. Claro que podremos multiplicarlo o dividirlo por el número que necesitemos, las matemáticas están de nuestro lado. El resto solo será cuestión de integrarlo a nuestro proyecto.
Consideraciones finales
Algo que debemos tener en cuenta es que con esta función escalará el video, pero, obviamente, el contenido se puede ver pixelado, dependiendo de la calidad del mismo. Si deseamos ofrecer distintos videos según el tamaño que busque el usuario y ofrecerle un rendimiento óptimo, deberíamos tener varios videos preparados para diferentes resoluciones estándar y crear una función que manipule el DOM y trabaje sobre el atributo src del elemento video o del elemento hijo source del mismo.
Espero que te haya resultado útil esta nota. Soy autor de un libro sobre HTML5 y brindo capacitaciones sobre este tema, si te interesa aprender más sobre HTML5 contáctame.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta