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

Flat Module con puro CSS

Flat Module con puro CSS

Ondas con SVG y CSS

Ondas con SVG y CSS

Calendario de cubo

Calendario de cubo

Algunos artículos que te pueden interesar

Mostrar contenido bajo demanda con solo HTML

Mostrar contenido bajo demanda con solo HTML

La etiqueta details es responsable para demarcar el contenido relevante, mientras que summary es responsable de demarcar el contenido secundario el cual es mostrado bajo demanda y en conjunto permiten mostrar/ocultar contenido bajo demanda.

Andrés Cruz 14-12-2015

2 tags HTML que no conocias <base> y <abbr>

2 tags HTML que no conocias <base> y <abbr>

Andrés Cruz 19-11-2015

Guía rápida sobre el elemento br en HTML

Guía rápida sobre el elemento br en HTML

El elemento br sirve para dar un salto de línea, se usa la siguiente etiqueta.

Andrés Cruz 21-02-2014