Tanto para audio como para vídeo tenemos una etiqueta específica que se encarga de reproducir cada tipo de formato.
En el caso del audio usamos esta etiqueta: <audio></audio>. El cierre es obligatorio, aunque como contenido de etiqueta unícamente podremos el texto que queremos que muestre el navegador en caso de que no soporte o no pueda reproducir el archivo indicado.
La forma de vincular un archivo de sonido a esta etiqueta es con el atributo src. Otro atributo fundamental es controls, que hace que el navegador muestre una pequeña interfaz para reproducir el archivo con los botones habituales de reproducir, pausa y control de volumen. Este atributo es booleano, por lo que no tenemos que añadirle ningún valor, solo indicar su nombre.
Ejemplo. El siguiente código inserta un archivo de audio con su reproductor en el navegador:
<audio src="../media/pista_01.mp3" controls>
Tu navegador no soporta audio en HTML5
</audio>
Quedando así:
Ejemplo con loop y autoplay
<audio src="../media/pista_03.wav" loop autoplay controls></audio>
Este audio se reproducirá en modo bucle:
Para la reproducción de vídeo usamos la etiqueta <video></video>, que tiene el mismo comportamiento y los mismos atributos disponibles que audio. Además, en el caso del vídeo también podemos usar CSS para especificar el tamaño del reproductor, aunque como ocurre con las imágenes lo mejor es mantener el tamaño original del vídeo para evitar que este pixele.
El elemento <video> dispone de un atributo llamado poster que permite definir una carátula de portada para el vídeo hasta que empiece a reproducirse.
Ejemplo
<video src="../media/video_01.mp4" controls poster="lluvia.jpg">
Tu navegador no soporta vídeo en HTML5
</video>
Lo veremos así:
Una opción muy habitual para reproducir vídeo en nuestro sitio es usar servicios externos de vídeo como YouTube o Vimeo, que permiten incrustar en nuestra página contenidos que se encuentran alojados en sus servidores, de forma que la reproducción del archivo se realiza desde fuera de nuestro servidor, lo que permite ahorrar en tráfico de datos en nuestro sitio.
En este caso lo que tenemos que hacer es acceder al vídeo en el portal en el que se encuentre alojado y obtener el código HTML que nos permite insertarlo en nuestro documento. En el caso de YouTube, por ejemplo, lo obtenemos desde el botón Compartir que se encuentra junto al vídeo.
En este ejemplo hemos usado este código:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/2oyhlad64-s"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
Obteniendo el vídeo dentro de nuestro documento:
Son etiquetas que van anidadas dentro de audio o video y permiten añadir pistas de texto cronometradas y sincronizadas con el archivo que se esté reproduciendo. Un uso habitual es el de incorporar subtítulos sobre archivos de vídeo.Es una etiqueta que no tiene cierre. Un mismo archivo de vídeo o audio puede incorporar más de un elemento <track>, y utiliza el atributo src para indicar qué archivo de texto debe mostrar.
Ejemplo
<video src="mivideo.mp4">
<track kind="subtitles" src="subtitulos.vtt">
</video>
Este tipo de elementos permiten cargar contenido externo de otros archivos de nuestro sitio, o incluso de sitios externos dentro del documento en que se encuentran.Son muy usados para incluir servicios externos, como vídeos o mapas, y también para construir aplicaciones con una capa de seguridad extra.
En este ejemplo cargamos nuestra propia web de apuntes dentro de un marco
<iframe src="https://cursoweb.net/" frameborder="0" width="100%" height="500"></iframe>
Este es el resultado
Un uso muy habitual es para incrustar mapas dentro de nuestra web
Los iframes admiten el atributo name, que junto con el atributo target de un enlace puede servir para ir cargando diferentes medios sobre el mismo iframe. De este modo:
<a href="vinculo1.html" target="destino">Enlace 1</a>
<a href="vinculo2.html" target="destino">Enlace 2</a>
<a href="vinculo3.html" target="destino">Enlace 3</a>
<a href="vinculo4.html" target="destino">Enlace 4</a>
<iframe src="" name="destino" frameborder="0"></iframe>
Este código nos permitirá visualizar cada uno de los enlaces anteriores sobre el mismo elemento iframe, sin que se cargue una página nueva en el navegador.