Elemento Picture

Un primer elemento para insertar contenido visual es la etiqueta picture que nos permite asociar un conjunto de imágenes a un mismo contenedor para que el navegador elija cual de esos elementos mostrar en función de una serie de condiciones que definamos.

Aunque esta misma tarea podríamos hacerla directamente con la etiqueta img combinándola con atributos sizes y srcset, el uso de picture y la etiqueta source junto al atributo media resulta una forma de trabajar más directa para este propósito, y además mantiene la misma lógica que el uso de media queries en CSS.

La forma de trabajar es la siguiente:

1. Definimos en primer lugar un contenedor de tipo picture que va a contener todas las versiones disponibles para una misma imagen
2. Para cada versión usamos un elemento source que indicará qué imagen mostrar con en atributo srcset cuando se cumpla la condición especificada en el atributo media
3. Por último, definimos un elemento img dentro de picture que se usará como fallback en caso de que niguna de las entradas anteriores coincida con los requisitos del navegador, también si este no soportase los source

Aspectos a tener en cuenta

En primer lugar, hay que saber que la etiqueta source se usa también dentro de las etiquetas audio y video para definir el origen de los medios a cargar, como veremos a continuación. Pero cuando source va dentro de un elemento picture usamos el atributo srcset par definir el origen de la imagen a mostrar, mientras que cuando usamos source dentro de audio o video el atributo para indicar el origen del archivo será src.

Otro punto a tener en cuenta es que los elementos source deben estar corretamente anidados dentro de picture en función del tipo de media que estemos usando. Si es min-width ordenaremos de mayor a menor, y a la inversa cuando usemos max-width.

Por último, podemos añadir a source un atributo type que permite especificar un tipo MIME al recurso del elemento source. Si el navegador no soporta ese tipo, el elemento será ignorado.

Ejemplo

El siguiente código:

                        
    <picture>
        <source media="(min-width:1400px)" srcset="/imgs/pict_1350px.png">
        <source media="(min-width:960px)" srcset="/imgs/pict_900px.png">
        <source media="(min-width:600px)" srcset="/imgs/pict_600px.png">
        <img src="/imgs/pict_400px.png" alt="">
    </picture>
                        
                    

Nos devuelve esta imagen, que cambiará si redimensionamos la pantalla del navegador

Audio

En el caso del audio usamos esta etiqueta: <audio></audio>. El cierre es obligatorio, aunque como contenido de etiqueta unícamente pondremos 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í:

Otros atributos para audio

• autoplay Es un atributo estándar de HTML5 que indica que el archivo debe ser reproducido tan pronto como se cargue la página. A día de hoy está desactivado por la mayoría de navegadores (Chrome si lo reconoce) porque supone una intromisión en la navegación, y aunque aparezca este atributo, la reproducción no comenzará hasta que el usuario pulse sobre el botón de reproducción.
• loop Indica que el archivo se reproduzca en modo bucle: cuando llega al final vuelve a empezar. También es de tipo boolenao.
• buffered, preload Son elementos que pueden ayudar a la descarga y reproducción del archivo, aunque realmente esas opciones ya son gestionadas por el navegador de forma óptima.

Ejemplo con loop y autoplay

            <audio src="../media/pista_03.wav" loop autoplay controls></audio>
            

Este audio se reproducirá en modo bucle:

Video

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í:

Vídeo desde un servicio externo

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:

Etiqueta source

Como hemos visto en el caso de picture, tenemos disponible la etiqueta source que permite seleccionar un recurso para ese contenedor en función de diversos criterios. Esa misma etiqueta source está disponible para audio y video con el mismo propósito. Pero en este caso van ligados al atributo type en lugar de media. Eso permite al navegador elegir el archivo correcto a reproducir en función de los formatos que soporte.

Ejemplo

        <audio controls>
            <source src="media/pista_01.mp3" type="audio/mp3">
            <source src="media/pista_01.ogg" type="audio/ogg">
            Este contenido solo se ve si el navegador no puede reproducir el audio
        </audio>
                    

Etiqueta track

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>
               
           

Elemento iframe

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

Navegación interna con iframes

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.php" target="destino">Enlace 1</a>
            <a href="vinculo2.php" target="destino">Enlace 2</a>
            <a href="vinculo3.php" target="destino">Enlace 3</a>
            <a href="vinculo4.php" 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.