Estructura HTML5/CSS3 par multipantalla y objetos multimedia

Imágenes

La resolución de pantalla es el número de pixeles que muestra. La resolución CSS o Viewport.
Si un dispositivo tiene un alto número de pixeles, a una distancia de visualización normal, usaremos dip la unidad de pixel independiente del dispositivo, es aproximadamente igual en todos los dispositivos.
El pixel CSS, corresponde al pixel real del dispositivo y el dispositivo corrige esta diferencia con un factor de escala.

Imágenes de mapa de bits

La imagen está formada por una rejilla de pixeles, se definen por su tamaño en ancho y alto en pixeles y la profundidad de color, el número de colores que es capaz de representar en cada pixel.

Imágenes vectoriales SVG

SVG son las siglas de Scalable Vector Graphics. Es un formato desarrollado y mantenido por el W3C.
Son imágenes definidas matemáticamente, que se calculan en el navegador y su visualización no pierde calidad en cualquier tamaño que se presenten.

La etiqueta picture

La etiqueta picture la solución para imágenes responsive.
Permite usar varias imágenes según las condiciones media.


<picture>
	<source media="(min-width: 1100px)" srcset="shaum6.jpg">
	<source media="(min-width: 1000px)" srcset="shaum5.jpg">
	<source media="(min-width: 800px)" srcset="shaum4.jpg">
	<source media="(min-width: 600px) " srcset="shaum3.jpg">
	<source media="(min-width: 400px)" srcset="shaum2.jpg">
	<source media="(min-width: 300px)“srcset="shaum1.jpg">
	<img src="shaum1.jpg" alt="shaum">
</picture>

Vídeos

HTML5 permite insertar contenido multimedia, audio y vídeo.


	<video src="video.mp4"> Tu navegador no soporta el elemento vídeo </video>

Atributos:

poster: permite insertar una imagen de sustitución cuando el vídeo no está disponible.
controls: se incluyen controles de play, pause…
width y height: ancho y alto, se ajusta al valor y el otro se calcula automáticamente manteniendo la proporción.
loop: reproduce el vídeo continuamente.
autoplay: reproduce el vídeo automáticamente.
preload: carga el vídeo


	<video src="video.mp4" poster="videojpg" autoplay loop controls></video>

/mod02/el-mejor-amigo.ogv: file type (or content in file) is only supported by supporter accounts

<source>

Es posible incluir diferentes formatos de un archivo para que el vídeo pueda ser soportado en distintos navegadores, se emplea la etiqueta <source>


	<video width="640" height="360" controls preload>
		<source src="video.mp4" type='video/mp4; codecs="avc1,mp4a"' />
		<source src="video.ogv" type='video/ogg; codecs="theora,vorbis"' />
		<source src="video.webm" type='video/webm; codecs="vp8,vorbis"' />
	</video>

Cada navegador, cada dispositivo, soporta diferentes formatos de vídeo. La solución es convertir el vídeo a los diferentes formatos de vídeo, que puede ser un proceso complejo y que requiere tiempo.
Una solución puede ser emplear YouTube para reproducir vídeo. Sube el vídeo a YouTube, toma nota de su identificador o copia el código de inserción que facilita YouTube.


	<iframe width="640" height="360" src="https://www.youtube.com/embed/CFp_8Sah6YU" frameborder="0" allowfullscreen>
	</iframe>

Los parámetros de YouTube:
autohide , valor 0 para tener los controles visibles y 1 si prefieres que se oculten cuando el video se está reproduciendo.
autoplay, 0 si quieres que el vídeo se reproduzca automáticamente, 1 si espera al play.
controls, con 0 los controles no se muestran con 1 si y en ambos el vídeo se descarga el vídeo, con 2 los controles se muestran pero el video no se descarga hasta hacer play.
Loop, 0 sólo una vez y 1 para reproducción infinita.
Esta en desuso emplear <object> o <embed> para insertar vídeo.