Unidad 7. Vídeo y audio (I)



El vídeo es cada día más importante en la web, hasta hace poco el ancho de banda y la potencia de los dispositivos limitaban su uso pero esto ha cambiado y cada vez es más usual reproducir vídeos a través de internet de forma satisfactoria, incluso en dispositivos móviles con conexiones inalámbricas.

El ejemplo más claro del uso de vídeo en la web es YouTube donde cualquiera puede subir un vídeo que se puede ver desde cualquier parte del mundo, pero también podemos incluir vídeo en nuestra propia página web de una forma más personalizada, esto es lo que vamos a ver en esta unidad.

También veremos cómo incluir archivos de audio en una página web.

En este vídeo puedes ver lo más fundamental de esta unidad:Videotutorial

7.1. Etiqueta <vídeo>

La etiqueta vídeo incrusta un vídeo en una página web, dentro de la etiqueta se debe especificar la fuente del vídeo mediante la etiqueta source, por ejemplo:

<video  controls>
  <source src="multimedia/tortola.mp4" type="video/mp4">
   Formato de vídeo no soportado.
</video>

Produce este resultado:

El atributo controls hace que aparezca una barra con los controles para arrancar/parar la reproducción, control del volumen, etc.

Antes del cierre de la etiqueta </video> se puede escribir un texto que aparecerá si el navegador no es capaz de reproducir el formato de vídeo. Aunque algunos navegadores no lo muestran y muestran un mensaje propio como "Origen no válido".

Pueden aparecer tantas etiquetas source como deseemos, lo normal es que cada una de ellas contenga el vídeo en un formato diferente. El navegador intentará reproducir la primera etiqueta source y si no puede lo intentará con las siguientes. De esta forma podemos aumentar las posibilidades de que el vídeo sea reproducido en todos los navegadores.

Lo normal, es colocar primero el formato preferido por nosotros, por ejemplo ogg, y a continuación los formatos más estándares, por ejemplo mp4.

Vamos a mostrar el comportamiento de dos etiquetas source con el siguiente código que hará que si ves esta página en Google Chrome veas el vídeo de la cotorra, pero si la ves en Microsoft Edge veas el vídeo de la tórtola porque a fecha de hoy (Diciembre de 2018) el navegador Edge no soporta el formato ogg:

<video  controls>
  <source src="multimedia/cotorra.ogg" type="video/ogg">
  <source src="multimedia/tortola.mp4" type="video/mp4">
   Formato de vídeo no soportado.
</video>

Este ejemplo que acabamos de ver no tiene mucho sentido, sólo sirve a efectos de ejemplo, como decíamos, lo normal es colocar el mismo vídeo en diferentes formatos.


Enero-2019 (V 2.2)
Pág. 7.1
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.