DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
28-09-2015

Hace unas entradas anteriores hablamos de los recursos multimedia que tenemos en HTML5 LAS ETIQUETAS VIDEO Y AUDIO PARA MULTIMEDIA EN HTML, aunque aplicar recursos pesados como vídeos nos lleva hacia uno de los mayores líos que nos podemos encontrar al momento de optimizar el tamaño de nuestra web.

Por una parte tenemos cada vez monitores más grandes con una alta resolución para reproducir lo que sea y por otra parte queremos que nuestro sitio cargue lo más rápidamente para que el internauta pueda tener una buena experiencia con nuestra web (a menos a lo que se refiere a la carga del sitio como tal); estas dos escenarios parecen imposible de coexistir juntos, pero podemos lograr un término medio entre los dos con ayuda de los Media Queries.

Los Media Queries de CSS en HTML para los videos

De la mano de los Media Queries que aplicamos en CSS para adaptar secciones de nuestra web para distintos tamaños de pantalla vienen los Media Queries aplicables mediante el atributo media en el fuente (source) de nuestros vídeos para cargar videos según las especificaciones de cada dispositivo:

    <video controls>
     <source src="video-1024.mp4" media="(min-device-width: 1200px)">
     <source src="video-640.mp4">
    </video>

Como podemos ver, se aplica la misma sintaxis que en el CSS; de tal forma podemos especificar que los dispositivos con mayor resolución carguemos los videos de mayor resolución (más grandes) y en cambio los dispositivos de menor resolución especifiquemos los videos de menor resolución (más pequeños).

Repasemos un poco los operadores disponibles que tenemos para emplear en este atributo:

Operadores de los Media Queries

Valor Descripción
and Operador AND
not Operador NOT
, Operador OR

Recordando que podemos especificar distintos videos según el dispositivo que esté empleando el usuario; entre los principales tenemos:

Dispositivos de los Media Queries

Value Description
all Para todos los dispositivos.
print Para modos de vista de impresión.
screen Para pantallas de computadora.
tv Para pantallas de televisión.

Además podemos aplicar algunos valores; entre los más empleados tenemos:

Valores de los Media Queries

Valor Descripción
width Especifica el ancho del área de visualización (generalmente se emplea con los prefijos "min-" y/o "max-").
height Especifica el largo del área de visualización (generalmente se emplea con los prefijos "min-" y/o "max-").

Puedes ver la documentación completa en el siguiente enlace: HTML media Attribute.

La mala noticia: actualmente no hay navegador que soporte los Media Queries

Aunque desgraciadamente parece ser que aún no existe compatibilidad con este atributo en ninguno de los navegadores web más populares como podrás darte cuenta en la sección "Browser Support" del enlace anterior; por lo tanto habrá que esperar futuras versiones de nuestros navegadores para la inclusión de la misma.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Calendario de cubo

Calendario de cubo

Flat Module con puro CSS

Flat Module con puro CSS

Ondas con SVG y CSS

Ondas con SVG y CSS

Algunos artículos que te pueden interesar

Dibujando nuestro propios SVG en HTML (parte 1)

Dibujando nuestro propios SVG en HTML (parte 1)

Un SVG no es más que un XML que describe como dibujar gráficos vectoriales en dos dimensiones y con HTML se ha hecho posible dibujarlos; en esta entrada veremos cómo dibujar formas básicas SVGs a través del elemento svg, definir estilo y sus atributos.

Andrés Cruz 11-05-2015

¿Cómo cambiar el contraste de una imagen con HTML5?

¿Cómo cambiar el contraste de una imagen con HTML5?

En este artículo veremos cómo aumentar o reducir el contraste de una imagen con HTML5; además hablaremos un poco de como sería el proceso para aumentar el brillo de una imagen; que es un caso similar.

Andrés Cruz 12-05-2014

La API Vibration (Vibración) en HTML5

La API Vibration (Vibración) en HTML5

El método vibrate del objeto navigator permite activar la vibración por hardware de un dispositivo mediante JavaScript.

Andrés Cruz 04-02-2014