Inicio > Desarrollo web, Uncategorized > Picture, Video y Audio en HTML5

Picture, Video y Audio en HTML5

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>

No está soportado por IE, Safari 9 y Opera Mini .

http://caniuse.com/#search=picture

Video

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>

Además, tenemos el problema del formato del vídeo:

Contenedor MP4 (Microsoft y Apple)
n Video: H264, Audio: ACC
w Existen Patentes

Contenedor WebM (Google y Firefox)
Video: VP8, Audio: Vorbis

Para resolverlo, utilizaremos <source> dentro de <video> para cada uno de los dos formatos.

Si el video es de Youtube, utilizaremos <iframe>.

 

Audio

El audio EN html4 se inserta de manera similar:
<audio src=”audio.mp3″ controls autoplay loop >
</audio>
El formato mp3, no es un formato abierto, para maximizar la
compatibilidad usaremos varios formatos con <source>
<audio controls>
<source src=”audio.ogg” type=”audio/ogg”>
<source src=”audio.mp3″ type=”audio/mpeg”>
<source src=”audio.wav” type=”audio/wav”>
</audio>

  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: