Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Incrustación de Audio y Video para Contenido Multimedia Enriquecido | Trabajando con Medios y Tablas
HTML Definitivo

book
Incrustación de Audio y Video para Contenido Multimedia Enriquecido

Inserción de audio

Se puede utilizar el elemento <audio> para incluir archivos de audio en una página web. Consideremos un ejemplo:

index.html

index.html

copy
<audio controls>
<source
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/html+audio+example"
type="audio/mp3"
/>
Fallback message (can be any text)
</audio>

En este ejemplo:

  • El elemento <audio> contiene un elemento <source>, que especifica la URL y el tipo de archivo de audio. Los formatos comúnmente soportados son MP3 y OGG;

  • El atributo controls muestra los controles estándar de reproducción como reproducir, pausar y volumen;

  • Si el navegador del usuario no admite el elemento de audio, se mostrará un mensaje alternativo.

Atributos adicionales comúnmente utilizados con el elemento de audio en HTML incluyen:

  • autoplay: inicia la reproducción del archivo de audio tan pronto como se carga la página;

  • loop: hace que el archivo de audio se repita de forma continua;

  • muted: silencia el audio por defecto;

  • volume: especifica el nivel de volumen predeterminado para el archivo de audio, con un rango de 0.0 (silencio) a 1.0 (volumen máximo).

A continuación se muestra un ejemplo que demuestra el uso de todos estos atributos:

index.html

index.html

copy
<audio controls autoplay loop muted volume="0.5">
<source src="audio.mp3" type="audio/mp3">
Sorry, your browser does not support audio.
</audio>

Inserción de video

Es posible insertar archivos de video en una página web utilizando el elemento <video>. Considere el siguiente ejemplo:

index.html

index.html

copy
<video controls width="300">
<source
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/html+video+example"
type="video/mp4"
/>
Fallback message (any text)
</video>

En este ejemplo:

  • El elemento <video> contiene un elemento <source>, que especifica la URL y el tipo de archivo del video. Los formatos comúnmente soportados son WebM, MP4 y OGG;

  • El atributo controls muestra los controles estándar de reproducción;

  • Si el navegador del usuario no admite el elemento de video, se mostrará un mensaje alternativo.

Atributos comúnmente utilizados para el elemento de video en HTML incluyen:

  • autoplay: inicia la reproducción del archivo de video tan pronto como la página se carga;

  • loop: hace que el archivo de video se reproduzca en bucle de forma continua;

  • muted: silencia el audio por defecto;

  • volume: especifica el nivel de volumen predeterminado para el archivo de audio, con un rango de 0.0 (silencio) a 1.0 (volumen máximo);

  • poster: especifica la URL de una imagen que se muestra como miniatura del video antes de que se reproduzca;

  • width y height: especifica el ancho y la altura del reproductor de video en píxeles.

A continuación se muestra un ejemplo que demuestra el uso de todos estos atributos:

index.html

index.html

copy
<video controls autoplay loop muted volume="0.5" width="640" height="360" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
Your browser does not support video.
</video>

Nota

Además, existen muchas bibliotecas y APIs de JavaScript disponibles que proporcionan funcionalidades adicionales para la reproducción y manipulación de contenido de video en la web.

question mark

¿Cuál de las siguientes afirmaciones sobre los elementos <audio> y <video> en HTML es verdadera?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 5

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

We use cookies to make your experience better!
some-alt