HTML. Unidad 8. Vídeo y audio.

Introducción

Ahora que estamos cómodos añadiendo imágenes simples a una página web, el siguiente paso será empezar a agregar reproductores de audio y video a tu documento HTML. En este artículo veremos cómo hacerlo con los elementos  <video> y <audio>; luego terminaremos viendo como agregar subtítulos a nuestros videos.

Vídeo y audio en Internet

Los desarrolladores web han querido usar audio y video en la web por mucho tiempo, desde comienzos del 2000 cuando empezamos a tener un ancho de banda suficientemente rápido para soportar cualquier tipo de video (los archivos de video son mucho más grandes que texto o imágenes). En los inicios, las tecnologías web nativas como HTML no tenían el soporte para incrustar audio y video en la Web, tecnologías privadas (o basadas en plugins) como Flash (y después, Silverlight) se convirtieron populares para manipular este tipo de contenido. Este tipo de tecnología funcionó bien, pero tenía ciertos problemas, incluídos el no trabajar bien con las características de HTML/CSS, problemas de seguridad y problemas de accesibilidad.

Una solución nativa podría resolver mucho de esto si es implementado correctamente. Afortunadamente, unos pocos años después la especificación HTML5 tenía tales características agregadas, con los elementos <video> y <audio>, y algo nuevo JavaScript APIs para controlar estos. No veremos Javascript aquí — solo los fundamentos básicos que se pueden lograr con HTML.

No te enseñaremos como crear archivos de audio y video — eso requiere un conocimiento completamente diferente. Por el contrario, te proporcionamos archivos de audio y video de muestra con códigos de ejemplo disponibles en «https://fernandoruizrico.com/test-audio-and-video/» para que tu mismo experimentes, en caso de que no puedas conseguirlos por ti mismo.

El elemento <video>

El elemento <video> nos permite incrustar video fácilmente. De la misma manera que para el elemento <img>, el atributo src (source) contiene una ruta al video que deseas incrustar. Funciona de la misma manera. Los usuarios deben ser capaces de controlar la reproducción de video y audio (esto es especialmente crítico en personas que padecen  epilepsia). Se debe utilizar el atributo controls para incluir la interfaz de control del browser, o construir la nuestra utilizando la JavaScript API apropiada. Como mínimo la interfaz debe incluir una manera de empezar y terminar la reproducción, y ajustar el volumen. Un ejemplo muy simple podría ser el siguiente:

<video src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm" controls></video>

Podemos insertar un párrafo dentro de la etiqueta  <video> (denominado contenido de reserva) — y será mostrado si el navegador desde el que se está accediendo a la página no soporta el elemento <video>, permitiéndonos proveer un «fallback» para navegadores más antiguos. Se puede elegir cualquier contenido para dicho párrafo; en nuestro caso proporcionamos un enlace directo al archivo de vídeo, para que el usuario pueda al menos acceder de alguna manera, independientemente del navegador que esté usando.

<video src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm" controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>

Atributos «width» y «height»

Podemos controlar el tamaño del vídeo con estos atributos o con CSS (esta es la opción más recomendable). En ambos casos, los vídeos mantienen su relación anchura – altura nativa. Si la relación de aspecto no se mantiene con los tamaños establecidos, el vídeo crecerá para rellenar el espacio horizontalmente y el el espacio sin rellenar sólo recibirá un color de fondo sólido de forma predeterminada. Por ejemplo, para establecer la anchura del vídeo a 720px y mantener la relación de aspecto, podemos utilizar un código similar al siguiente:

<video width="720"
       src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" 
       controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

Ejercicio propuesto: Película de animación «Caminandes»

Crea una página web con el ejemplo anterior y copia el código tres veces para mostrar el mismo vídeo tres veces en total. Cambia el ancho para establecer un valor diferente para cada vídeo (1080, 720 y 480) y cambia también el atributo src para que corresponda con el de cada vídeo. Finalmente, verifica los resultados en tu navegador (actualiza la página web para asegurarte de que el navegador esté mostrando los últimos cambios en tu código). No olvides incluir todas las etiquetas HTML básicas necesarias y validar su código.

Vídeos:

https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm

https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm

https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_480p.mp4

<video width="1080"
       src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm" 
       controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

<video width="720"
       src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" 
       controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

...

El atributo «poster»

Puedes especificar una URL para mostrar una imagen (atributo poster) hasta que el usuario reproduzca el vídeo. Si este atributo no se especifica, no se muestra nada hasta que el primer fotograma esté disponible, momento en el cual se mostrará esa imagen como póster.

<video width="1080"
       src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm" 
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg"
       controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

Ejercicio propuesto: Película de animación «Caminandes»

Modifica el código del ejercicio anterior, donde tienes el mismo vídeo con tres tamaños diferentes. Ahora tiene que usar el atributo poster para configurar tres imágenes diferentes (puede encontrar debajo los enlaces a los carteles, que están disponibles en https://fernandoruizrico.com/test-audio-and-video/, o puedes usar otras imágenes que te gusten). Cuando termines, verifica los resultados en tu navegador (actualiza tu página web para asegurarte de que el navegador esté mostrando los últimos cambios en tu código). No olvides incluir todas las etiquetas HTML básicas necesarias y validar tu código.

Posters:

https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg

https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/mine.png

https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/share.png

<video width="1080"
       src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm" 
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg"
       controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

<video width="720"
       src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" 
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/mine.png"
       controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

...

Compatibilidad con los navegadores

Normalmente se utilizan algunos códecs para comprimir vídeo y audio para conseguir que los archivos sean más manejables, ya que el audio y el vídeo sin procesar son excesivamente grandes. Cada navegador web admite una variedad de códecs, que se utilizan para convertir el audio y el vídeo comprimidos en datos binarios y viceversa. Cada códec ofrece sus propias características positivas y negativas que afectan a las decisiones sobre cuál utilizar. Para maximizar la probabilidad de que tu sitio web o aplicación funcione en el navegador de un usuario, es posible que debas proporcionar cada archivo multimedia en varios formatos. Si tu página web y el navegador del usuario no comparten un formato en común, los ficheros de audio o vídeo simplemente no se reproducirán.

Debemos tener en cuenta un aspecto adicional respecto a este tema: los navegadores móviles pueden admitir formatos adicionales no admitidos por sus equivalentes de escritorio, al igual que es posible que no admitan los mismos formatos que la versión de escritorio. Además de eso, tanto los navegadores de escritorio como los móviles pueden estar diseñados para gestionar la reproducción de medios (ya sea para todos los formatos o solo para tipos específicos que no pueden gestionar internamente). Esto significa que la compatibilidad con los ficheros depende en parte del software que haya instalado el usuario.

Entonces, ¿cómo gestionamos la compatibilidad de formatos? Echa un vistazo al código actualizado del ejemplo:

<video width="1080"
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/mine.png"
       controls>
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm"
    type="video/webm">
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.mp4"
    type="video/mp4">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

Aquí hemos quitado el atributo src del elemento <video> y en su lugar incluimos elementos separados <source> que apuntan a sus propias fuentes. En este caso el navegador irá a los elementos <source> y reproducirá el primero de los elementos que soporte. En primer lugar intentará reproducir el vídeo utilizando el formato WebM, y si no lo reconoce como válido, entonces intentará reproducir el formato MP4. Incluir fuentes WebM y MP4 debería bastar para reproducir el video en la mayoría de los navegadores actuales. Pero en cualquier caso, si el navegador no soporta ninguno de los formatos especificados, también hemos incluido el mensaje de aviso con el enlace correspondiente.

Cada elemento  <source>  también tiene un atributo type . Es opcional, pero se recomienda que se incluyan, ya que contienen MIME types (en-US) de los archivos de vídeo y los navegadores pueden leerlos y omitir inmediatamente los vídeos que no soporten. Si no están incluidos, los navegadores cargarán e intentarán reproducir cada archivo hasta que encuentren uno que funcione, lo que llevará aún más tiempo y un consumo de recursos innecesario.

En este artículo sobre soporte de formatos multimedia puedes encontrar algunos de los MIME types (en-US) más comunes.

Ejercicio propuesto: Película de animación «CaminandeS»

Tienes que modificar el código del ejercicio anterior donde tienes tres vídeos que muestran la película animada «Caminandes», cada uno con un tamaño diferente y un póster diferente. Debes insertar ahora un par de elementos fuente para que los tres vídeos contengan enlaces para los códecs webm y mp4 (puedes encontrar los enlaces en el ejemplo que tienes a continuación y también en https://fernandoruizrico.com/test-audio-and -video/). Verifica los resultados en tu navegador y no olvides añadir todas las etiquetas HTML necesarias y validar tu código.

Fíjate que el ancho del vídeo se puede ajustar a través del atributo «width», y también vamos a utilizar el atributo «poster» para establecer la imagen que se mostrará antes de que se reproduzca cada vídeo:
<video width="1080"
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/mine.png"
       controls>
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm"
    type="video/webm">
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.mp4"
    type="video/mp4">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

<video width="720"
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/share.png"
       controls>
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm"
    type="video/webm">
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.mp4"
    type="video/mp4">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>

...

Ejercicio propuesto: Película de animación «Sintel»

Crea una nueva página web con el siguiente código para mostrar la película animada «Sintel». Después de eso, duplica el código un par de veces para mostrar tres vídeos en total. Cambia el tamaño de los videos a 1080, 720 y 480 y configura los elementos <source> en consecuencia (elimina también el antiguo atributo src, de modo que obtengas un código similar al que se muestra en el siguiente ejemplo). Finalmente, cambia la imagen del póster para que cada vídeo muestre una imagen diferente cuando se acabe de cargar la página. Puedes encontrar los enlaces a los vídeos y carteles en https://fernandoruizrico.com/test-audio-and-video/, y también aquí:

Vídeos (1080 px):

https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-1080p.mp4

https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-1080p.ogv

Vídeos (720 px):

https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-720p.mp4

https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-720p.ogv

Vídeos (480 px):

https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-480p.mp4

https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-480p.ogv

Pósters:

https://fernandoruizrico.com/examples/test-media/video/sintel/stills/poster.jpg

https://fernandoruizrico.com/examples/test-media/video/sintel/stills/scales.png

https://fernandoruizrico.com/examples/test-media/video/sintel/stills/dragon.png

<video 
  width="1080" controls
  poster="https://fernandoruizrico.com/examples/test-media/video/sintel/stills/scales.png">
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-1080p.mp4"
    type="video/mp4">
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-1080p.ogv"
    type="video/ogg">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>

...

Otras funcionalidades del elemento <video>

Hay varias características adicionales que puedes incluir en un vídeo HTML5. Echa un vistazo al ejemplo que aparece a continuación:

<video controls width="720"
       autoplay loop muted preload="auto" 
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg">
  <source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" type="video/webm">
  <source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.mp4" type="video/mp4">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>

El atributo «autoplay»

Este atributo booleano le indica al navegador que el audio o el vídeo deben empezar a reproducirse de inmediato, mientras se carga el resto de la página. Conviene puntualizar que se desaconseja utilizar la reproducción automática ya que los usuarios pueden encontrarlo un poco molesto. Puedes consultar este enlace (autoplay guide) para obtener información adicional sobre cómo usar este atributo de manera adecuada.

El atributo «loop»

Si lo activamos, el vídeo (o audio) comenzará a reproducirse de nuevo cada vez que se acabe. Esta funcionalidad también puede resultar molesta en ocasiones, por lo que se recomienda utilizarlo solo si es realmente necesario.

El atributo «muted»

Este atributo booleano indica la configuración predeterminada del audio contenido en el vídeo. Si está activado, el audio se silenciará inicialmente. Su valor predeterminado es falso, lo que significa que el audio se reproducirá cuando se reproduzca el vídeo.

El atributo «preload»

El objetivo de este atributo enumerado es proporcionar una sugerencia al navegador sobre qué cree el desarrollador que resultará en una mejor experiencia para el usuario . Puede tener uno de los siguientes valores:

  • «none»: sugiere bien que el desarrollador cree que el usuario no tendrá que consultar el vídeo, o que el servidor desea minimizar su tráfico; es decir, esta sugerencia indica que el vídeo no se debe almacenar en caché.
  • «metadata»: sugiere que aunque el autor piensa que el usuario no tendrá que consultar este vídeo, es razonable capturar los metadatos (p. ej. longitud).
  • «auto»: sugiere que el usuario necesita tener prioridad; es decir, esta sugerencia indica que, si es necesario, se puede descargar el vídeo completo, incluso aunque el usuario no vaya a usarlo.
  • la cadena vacía: que es un sinónimo del valor «auto».

Si no está configurado, su valor predeterminado está definido por el navegador (es decir, cada navegador puede elegir su propio valor predeterminado), aunque la especificación aconseje que se establezca a «metadata».

Ejercicio propuesto: atributos adicionales

Siguiendo los ejemplos anteriores, crea una nueva página web con tres vídeos cualquiera y establece diferentes valores de los siguientes atributos: «loop», «muted» y «preload». También puedes probar el atributo de reproducción automática, aunque debes tener en cuenta que algunos navegadores pueden tener esta función desactivada. Finalmente verifica los resultados en tu navegador y valida el código.

<video controls width="720"
       loop muted
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg">
  <source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" type="video/webm">
  <source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.mp4" type="video/mp4">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>

<video controls width="720"
       loop preload="metadata"
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg">
  <source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" type="video/webm">
  <source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.mp4" type="video/mp4">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>

...

Ejercicio propuesto: Tus 10 vídeos preferidos

Crea una página web para mostrar los diez vídeos que más te gusten. Debes establecer al menos los atributos de «width» y «poster» y también el elemento de <source> para asegurarte de que todos se muestren de la manera correcta, como en los ejemplos anteriores.

Puedes encontrar vídeos de ejemplo en los siguientes enlaces: https://senkorasic.com/testmedia/, https://archive.org/details/BigBuckBunny_124, https://archive.org/download/ElephantsDream/, https://tools.woolyss.com/html5-audio-video-tester/, https://test-videos.co.uk/, http://losplayer.com/?page_id=1880, https://dafftube.org/video-links/, https://github.com/mediaelement/mediaelement-files, http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5, https://sample-videos.com/, http://samples.mplayerhq.hu/, https://www.clipcanvas.com/a/video-clip-formats-and-codec-samples, https://peach.blender.org/download/, https://download.blender.org/peach/bigbuckbunny_movies/, https://orange.blender.org/download/, https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content, etc.

El elemento <audio>

The HTML <audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It works just like the <video> element, with a few small differences as outlined below. A typical example might look like so:

<figure>
    <figcaption>Trance 2. Instrumental Background Music.</figcaption>
    <audio
        controls
        src="https://fernandoruizrico.com/examples/test-media/audio/Twisterium-Trance2.wav">
        <p>Your browser doesn't support HTML5 audio. Click <a href="https://fernandoruizrico.com/test-audio-and-video/">here</a>  para poder visualizarlo.</p>
    </audio>
</figure>

<figure>
    <figcaption>Space battle. Space Fantasy Spot Effect.</figcaption>
    <audio
        controls
        src="http://bbcsfx.acropolis.org.uk/assets/07042219.wav">
        <p>Your browser doesn't support HTML5 audio. Click <a href="http://bbcsfx.acropolis.org.uk">here</a> instead.</p>
    </audio>
</figure>

The above example shows simple usage of the <audio> element. In a similar manner to the <img> and <video> elements, we include a path to the media we want to embed inside the src attribute. We can include other attributes to specify information such as whether we want it to loop, whether we want to show the browser’s default audio controls, etc.

As with the <video> tag, the content inside the opening and closing <audio></audio> tags is shown as a fallback in browsers that don’t support the element.

This takes up less space than a video player, as there is no visual component — you just need to display controls to play the audio. Other differences from HTML video are as follows:

  • The <audio> element doesn’t support the width/height attributes — again, there is no visual component, so there is nothing to assign a width or height to.
  • It also doesn’t support the poster attribute — again, no visual component.

Ejercicio propuesto: ejemplos de audio

Following the previous example, create a web page to insert at least ten figures containing audio samples. Update the caption of each figure to show a brief description of each audio file, and check the results in your browser. Do not forget to add all necessary HTML basic tags and validate your code.

You can find thousands of audio samples at: http://bbcsfx.acropolis.org.uk/

El elemento <iframe>

By now you should really be getting the hang of embedding things into your web pages, including images, video and audio. At this point we will like to take somewhat of a sideways step, looking at an element that allow you to embed a wide variety of content types into your webpages: the <iframe> element.

Incrustar un vídeo de YouTube

In this section we are going to jump straight into an active learning example to immediately give you a real idea of just what embedding technologies are useful for. The online world is very familiar with Youtube, but many people don’t know about some of the sharing facilities it has available. Let’s look at how Youtube allows us to embed a video in any page we like using an <iframe>:

  1. First, go to Youtube and find a video you like.
  2. Below the video, you’ll find a Share button — select this to display the sharing options.
  3. Select the Embed button and you’ll be given some <iframe> code — copy this.
<figure>
    <figcaption>Nyan Cat [original].</figcaption>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</figure>

Ejercicio propuesto: Tus 10 vídeos de YouTube preferidos

Following the previous example, create a web page to insert at least ten figures containing videos from Youtube. Update the caption of each figure to show a brief description of each video, and check the results in your browser. Do not forget to add all necessary HTML basic tags and validate your code.

Incrustar un mapa de Google Maps

You will also find quite interesting embedding a Google Map. Let’s see how to do this with an example:

  1. Go to Google Maps and find a map you like.
  2. Click on the «Hamburger Menu» (three horizontal lines) in the top left of the user interface.
  3. Select the Share or embed map option.
  4. Select the Embed map option, which will give you some <iframe> code — copy this.
<figure>
    <figcaption>IES San Vicente.</figcaption>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3126.6024620057733!2d-0.5317505844743932!3d38.4044398796498!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd6233fea3991575%3A0xf28fcef8c48c1513!2sIES%20San%20Vicente!5e0!3m2!1ses!2ses!4v1601811180214!5m2!1ses!2ses" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</figure>

Ejercicio propuesto: Tus 10 ubicaciones preferidas

Following the previous example, create a web page to insert at least ten figures containing locations from Google Maps. Update the caption of each figure to show a brief description of each location, and check the results in your browser. Do not forget to add all necessary HTML basic tags and validate your code.

Test

Comprueba tus conocimientos con este test sobre audio y vídeo y otros conceptos relacionados con esta unidad.