HTML - Insertar multimedia
Audio y Video
Elemento de Audio HTML5
El elemento <audio> de HTML5 te permite insertar contenido de audio en tus páginas web. Esta es la sintaxis básica para usar el elemento <audio>:
Consejo: Sintaxis Básica del Elemento de Audio HTML5
<audio src="ruta/al/archivo/audio.mp3" controls></audio>El atributo src especifica la ruta al archivo de audio que deseas insertar. El atributo controls añade controles de audio predeterminados, como reproducir, pausar y volumen, al reproductor de audio.
Algunos atributos comúnmente usados para el elemento <audio> incluyen:
| Atributo | Descripción |
|---|---|
autoplay |
Comienza a reproducir el audio automáticamente cuando se carga la página. |
loop |
Repite la reproducción del audio indefinidamente. |
muted |
Silencia la salida de audio por defecto. |
preload |
Especifica cómo se debe cargar el archivo de audio (por ejemplo, "auto", "metadata", o "none"). |
El elemento <audio> admite varios formatos de audio, incluyendo:
- MP3 (
.mp3) - WAV (
.wav) - OGG (
.ogg)
Consejo: Insertando un Archivo de Audio con el Elemento <audio>
<audio src="musica.mp3" controls autoplay loop>
Tu navegador no soporta el elemento de audio.
</audio>Elemento de Video HTML5
El elemento <video> de HTML5 te permite insertar contenido de video en tus páginas web. Esta es la sintaxis básica para usar el elemento <video>:
Consejo: Sintaxis Básica del Elemento de Video HTML5
<video src="ruta/al/archivo/video.mp4" controls></video>El atributo src especifica la ruta al archivo de video que deseas insertar. El atributo controls añade controles de video predeterminados, como reproducir, pausar y volumen, al reproductor de video.
Algunos atributos comúnmente usados para el elemento <video> incluyen:
| Atributo | Description |
|---|---|
autoplay |
Comienza a reproducir el video automáticamente cuando se carga la página. |
loop |
Repite la reproducción del video indefinidamente. |
muted |
Silencia la salida de audio del video por defecto. |
poster |
Especifica una imagen que se mostrará mientras el video se está descargando o hasta que el usuario reproduzca el video. |
width y height |
Establece el ancho y alto del reproductor de video. |
El elemento <video> admite varios formatos de video, incluyendo:
- MP4 (
.mp4) - WebM (
.webm) - OGG (
.ogg)
Consejo: Insertando un Archivo de Video con el Elemento <video>
<video src="pelicula.mp4" controls width="640" height="360">
Tu navegador no soporta el elemento de video.
</video>Incorporación de medios externos
Incorporación de videos de YouTube
Puedes incorporar videos de YouTube en tus páginas web utilizando el elemento <iframe>. Para obtener el código de incorporación de un video de YouTube:
- Ve al video de YouTube que deseas incorporar.
- Haz clic en el botón "Compartir" debajo del video.
- Haz clic en la opción "Insertar" para obtener el código de incorporación.
Consejo: Código de incorporación de YouTube
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>Reemplaza VIDEO_ID con el ID del video de YouTube que deseas incorporar.
Puedes personalizar el reproductor de YouTube incorporado cambiando los parámetros de URL en el atributo src. Algunos parámetros comunes incluyen:
| Parámetro | Descripción |
|---|---|
autoplay=1 |
Inicia automáticamente la reproducción del video al cargar |
loop=1 |
Repite la reproducción del video indefinidamente |
controls=0 |
Oculta los controles predeterminados del video |
Incorporación de videos de Vimeo
La incorporación de videos de Vimeo es similar a la de videos de YouTube. Necesitarás usar el elemento <iframe> con el código de incorporación. Para obtener el código de incorporación de un video de Vimeo:
- Ve al video de Vimeo que deseas incorporar.
- Haz clic en el botón "Compartir" debajo del video.
- Haz clic en la pestaña "Insertar" para obtener el código de incorporación.
Consejo: Código de incorporación de Vimeo
<iframe src="https://player.vimeo.com/video/VIDEO_ID" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>Reemplaza VIDEO_ID con el ID del video de Vimeo que deseas incorporar.
Puedes personalizar el reproductor de Vimeo incorporado cambiando los parámetros de URL en el atributo src o utilizando las opciones en el generador de código de incorporación en Vimeo.
Incorporación de audio de SoundCloud
SoundCloud proporciona un código de incorporación <iframe> para insertar pistas de audio en tus páginas web. Para obtener el código de incorporación de una pista de SoundCloud:
- Ve a la pista de SoundCloud que deseas incorporar.
- Haz clic en el botón "Compartir" debajo de la forma de onda de la pista.
- Haz clic en la pestaña "Insertar" para obtener el código de incorporación.
Consejo: Código de incorporación de SoundCloud
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/TRACK_ID&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>Reemplaza TRACK_ID con el ID de la pista de SoundCloud que deseas incorporar.
Puedes personalizar el reproductor de SoundCloud incorporado cambiando los parámetros de URL en el atributo src o utilizando las opciones en el generador de código de incorporación en SoundCloud.
Consideraciones de Accesibilidad
Al añadir contenido multimedia a tus páginas web, debes pensar en la accesibilidad para todos los usuarios, incluidos aquellos con discapacidades. Aquí hay algunas consideraciones clave de accesibilidad a tener en cuenta:
Proporcionar Contenido Alternativo para Multimedia
Para hacer que tu contenido multimedia sea accesible a usuarios que no puedan verlo o escucharlo, debes proporcionar contenido alternativo. Esto puede incluir:
| Contenido Alternativo | Descripción |
|---|---|
| Transcripciones de texto | Para contenido de audio |
| Subtítulos | Para contenido de video |
| Alternativas de texto descriptivo | Para imágenes y videos |
Puedes proporcionar transcripciones de texto y subtítulos usando el elemento <track> dentro de los elementos <audio> o <video>.
Consejo: Proporcionar Contenido Alternativo para Multimedia
<video src="video.mp4" controls>
<track src="captions.vtt" kind="captions" srclang="en" label="Subtítulos en Inglés">
Tu navegador no soporta el elemento de video.
</video>El elemento <track> se usa para especificar un archivo (captions.vtt) que contiene los subtítulos para el video. El atributo kind se establece como "captions" para indicar que la pista es para subtítulos, y el atributo srclang especifica el idioma de los subtítulos.
Asegurar la Accesibilidad por Teclado para Medios Incrustados
Al incrustar medios de fuentes externas como YouTube, Vimeo o SoundCloud, debes asegurarte de que el reproductor de medios incrustado sea accesible por teclado. Esto significa que los usuarios deberían poder controlar el reproductor usando comandos de teclado, como:
- Barra espaciadora para reproducir/pausar
- Teclas de flecha para avanzar o retroceder
- Tecla TAB para moverse entre controles
La mayoría de los reproductores de medios incrustados de fuentes confiables están diseñados teniendo en cuenta la accesibilidad por teclado. Sin embargo, debes probar la accesibilidad por teclado de tus medios incrustados para asegurarte de que funcionen como se espera.
También debes proporcionar instrucciones claras o etiquetas para cualquier control de medios personalizado que crees para asegurarte de que todos los usuarios, incluidos aquellos que usan tecnologías de asistencia, puedan entenderlos y usarlos.