HTML5.- Etiquetas Audio y Video en WebMatrix

Posted by Pit Monday, June 11, 2012 7:50:00 AM

Hi geeks,

Por aquí reportándome luego de una perdida XD pero vamos a hora con pasito acelerado para recuperar el ritmo y perder esos kilos de pereza Confundido. Dejando el intro cursi vamos a lo nuestro…HTML5 rocks!

 

HTML 5 incluye nuevas etiquetas como <audio> y <video> en un documento HTML. Nos permitirán incluir un reproductor con un archivo de audio o video.

 

AUDIO

 

<audio> permite reproducir archivos de sonido en diferentes formatos sin necesidad de un plugin como adobe flashplayer. Para insertar un sonido se debe de utilizar la etiqueta <audio>, esta etiqueta tiene atributos tales como:

  • SRC: enlaza al archivo de audio que queremos reproducir.
  • CONTROLS: implementa los controles del reproductor por defecto del navegador como, botón play - pause, seek y volumen.
  • AUTOPLAY: reproduce el archivo de audio desde que se carga la página.
  •  PRELOAD: carga un poco el archivo de audio antes de iniciar la reproducción en el buffer para que no se trabe por reproducir más de lo que carga.

 

Ejemplo:

<audio src="Url del archivo.mp3" type="audio/mp3" controls autoplay />

 

 

Vista previa:

 

reproductor

 

Aquí esta la tabla de soporte de formatos:

Formato             IE 8         Firefox 3.5           Opera 10.5           Chrome 3.0            Safari 3.0
Ogg                    No                Si                       Si                        Si                          No
MP3                    No                No                      No                       Si                          Si
Wav                    No                Si                       Si                        No                         Si

 

 

¿Qué hacer si un navegador no lo soporta?

También está previsto, y podemos hacer uso de la siguiente estructura:

 

<audio src="Url del archivo.mp3" type="audio/mp3" controls autoplay>

  <a href="Url del archivo.mp3">Tu navegador no soporta esta función</a>

</audio>

 

 

si, no soporta saldrá esto:

 

 nosoporta

 

Que es lo que escribimos para que se muestre:

 

<a href="Url del archivo.mp3">Tu navegador no soporta esta función</a>

 

 

Por eso también podemos agregar varios formatos del sonido mientras lo tengas en dicho formato:

 

<audio controls autoplay preload>

  <source src="Url del archivo.ogg" type="audio/ogg" />

  <source src="Url del archivo.mp3" type="audio/mpeg" />

  <source src="Url del archivo.wav" type="audio/wav" />

  Tu navegador no soporta esta caracteristica

</audio>

 

 

 

VIDEO

 

Expliquemos los atributos de la etiqueta:

  • SRC: enlaza el archivo de video que queremos reproducir.
  • WIDTH: define el ancho del video en pixeles.
  • HEIGHT: define la altura del video en pixeles.
  • CONTROLS: implementa los controles del reproductor por defecto del navegador como, botón play-pause, seek y volumen.
  • AUTOPLAY: reproduce el archivo de video desde que se carga la página.
  • PRELOAD: Nos carga un poco el archivo de video antes de iniciar la reproducción en el buffer para que no se trabe por reproducir mas de lo que carga.

Para insertar un archivo de vídeo o enlazar con un vídeo en directo, usaremos <video> Ejemplo:

 

<video src="Url del archivo.mp4" width="640" height="360" controls autoplay preload />

 

 

Vista previa:

 

video

 
 
 
Implementación de formatos de video:

Al igual que en la etiqueta AUDIO tenemos muchos formatos de video que debemos implementar ya que cada motor de renderizado de los navegadores tiene soporte para un códec de video diferente.

Veamos la tabla de compatibilidad:

Imagen tomada de: www.desarrolloweb.com/articulos/integrar-video-html5.html

 

Ejemplo para hacer que sirva para todos los navegadores:

<video controls autoplay preload>

  <source src=”Url del archivo.ogv” type='video/ogg; codecs="theora, vorbis"' />

  <source src=”Url del archivo.mov″ type='video/mp4; codecs="avc1.42E01E,  mp4a.40.2"' />

  <source src=”Url del archivo.webm” type='video/webm; codecs="vp8, vorbis"' />

  Tu navegador no soporta esta característica

</video>

 

Como ven, la diferencia es poca, ahora solo quitamos el atributo SRC y agregamos los SOURCE de los diferentes archivos de video. Algo fácil manejar estas etiquetas luego de que aprendas a manejarlas bien podrás jugar mucho con CSS y hacer tus propios reproductores personalizados !!

 

Eso es todo por hoy muchach@s recuerden visitar el pensum del curso y de realizar sus consultas en formspring o déjanos tu comentario Wink

No olvides seguir en twitter a:

Para estar al día con las entradas en este blog.  Y para finalizar darle un enorme gracias a mi bro Kevin Concha por el apoyo que me da cada día Sonrisa

View User Profile for Peter J. Concha Regatto Web Developer & Speaker Eloquent. @Avanet Community Lead & #IEuserAgent. Microsoft MVP ASP.NET/IIS

Comments

Comments are closed on this post.