Página personal de javisendo

Imágenes

<picture>

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

	<picture>
		<source media="(min-width: 1000px)" srcset="image1.jpg">
		<source media="(min-width: 80px)" srcset="image2.jpg">
	</picture>

Ejemplo: Reescala la ventana para comprobar el cambio de la siguiente imágen

shaum

Vídeos

HTML5 permite insertar contenido multimedia, audio y vídeo. Para ello se usa la etiqueta video

Cada navegador, cada dispositivo, soporta diferentes formatos de vídeo. Una posible solución es convertir el vídeo a los diferentes formatos de vídeo, otra puede ser emplear YouTube para reproducir vídeo.

Es posible incluirincluir 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="video1.mp4" type='video/mp4; codecs="avc1,mp4a"' /> 
		<source src="video1.ogv" type='video/ogg; codecs="theora,vorbis"' /> 
		<source src="video1.webm" type='video/webm; codecs="vp8,vorbis"' />
	 </video>

Ejemplo de inclusión de vídeos de fuente Youtube