DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
18-06-2015

Siguiendo con las entradas que explican las etiquetas HTML que en mi punto de vista considero las más versátiles y complejas, ahora veremos unas etiquetas que permiten mostrar contenido multimedia a nuestra web mediante videos y audios de distintos formatos:

Esto último es lo que realmente las hace especial y esto se debe a que cada navegador soporta algunos de los formatos navegador listados anteriormente.

Una de los grandes características que trae HTML5 consigo es la inclusión de contenido multimedia como audios y vídeos.

Primero hablaremos sobre la etiqueta <video>; como veremos en esta entrada, ambas etiquetas (<video> y <audio>) tienen comportamientos, definiciones y atributos parecidos y de ahí el porqué de escribir una sola entrada para ambas etiquetas.

1.0 La etiqueta <video>

Para poder emplear la etiqueta <video> esta debe estar acompañada de algunos atributos y otras etiquetas hijas como veremos a continuación.

1.1 Atributos para cargar un vídeo

Se emplean los atributos width y height para especificar el ancho y largo que queramos que tenga el vídeo.

Además podemos especificar el atributo controls para indicar que muestre los controles como pausa, reproducción, volumen...:

Control de reproducción en Google Chrome

Y el atributo src para indicar la URL fuente (vídeo).

<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg"> 
Tu navegador no soporta la etiqueta video.
<video>

En el código HTML anterior especificamos el mismo vídeo en dos formatos diferentes para que pueda ser visualizado en los navegadores con soporte de vídeo MP4 y OGG; además se especifica que el vídeo espacio de visualización del vídeo será de 320x240 píxeles y que presente controles.

Lo ideal es agregar el mayor número de formatos para garantizar la reproducción en los navegadores.

En el caso de que sea un navegador anticuado como Internet Explorer 8 se mostraría el siguiente mensaje:

"Tu navegador no soporta la etiqueta video."

En el siguiente enlace verás una tabla con los formatos de video soportados por navegador: HTML <video> Tag.

1.2 Otros atributos de la etiqueta <video>

autoplay Especifica el inicio del vídeo tan pronto se cargue.
loop Especifica que el vídeo se reproducirá nuevamente al terminar su reproducción.
muted Especifica que el vídeo no reproducirá el audio (mudo).

Puedes ver el resto de los atributos en el siguiente enlace: HTML <video> Tag.

2.0 La etiqueta <audio>

Ya entendida el funcionamiento del elemento anterior, ahora vamos con la etiqueta <audio> la cual presenta un especificaciones similar al de la etiqueta <video> (aparte de cargar audios en vez de vídeos); también cuenta con múltiples soportes de audio dependiendo del navegador los cuales puedes ver en el siguiente enlace: HTML

La etiqueta <audio> también cuenta con los mismos atributos vistos anteriormente y se deben de especificar al menos un audio:

<audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
  Tu navegador no soporta la etiqueta audio.
</audio>

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Como dibujar con canvas y ciclos -HTML5

Como dibujar con canvas y ciclos -HTML5

Calendario de cubo

Calendario de cubo

Animacion SVG sencilla con solo HTML

Animacion SVG sencilla con solo HTML

Algunos artículos que te pueden interesar

El elemento area y map en HTML

El elemento area y map en HTML

Con el elemento área es posible crear zonas clickeables dentro de una imagen; el elemento área debe de contener elementos hijos llamados map.

Andrés Cruz 26-11-2014

Algunos efectos interesantes que se pueden lograr con listas en CSS

Algunos efectos interesantes que se pueden lograr con listas en CSS

En esta entrada veremos algunos efectos curiosos sobre listas ul (algunos con efectos 3D).

Andrés Cruz 30-04-2015

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

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

El elemento p sirve para agregar párrafos; a nuestra página web.

Andrés Cruz 21-02-2014