Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Desafío: Incrustar audio y video en HTML | Trabajando con Medios y Tablas
HTML Definitivo

Desafío: Incrustar audio y video en HTML

Desliza para mostrar el menú

Objetivo

Crear una experiencia multimedia atractiva para los visitantes del sitio web incorporando contenido de audio y video.

Tarea

Llevar el sitio web al siguiente nivel sumergiendo a los usuarios en una experiencia multimedia cautivadora. Tu tarea es:

Para el audio: insertar un archivo de audio que proporcione un ambiente relajante para que los usuarios se relajen. Utiliza el siguiente enlace para el audio:

https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/just-relax-audio.mp3

Para el video: integrar un video que permita a los usuarios disfrutar de la belleza de las criaturas de la naturaleza. Utiliza el siguiente enlace para el video:

https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/tiger-video.mp4

Agregar controles de reproducción como reproducir y pausar.
Agregar tipos de archivo.

index.html

index.html

index.css

index.css

Pista
expand arrow
  1. Utiliza la etiqueta <audio> para especificar un elemento de audio;
  2. Utiliza la etiqueta <video> para especificar un elemento de video;
  3. Utiliza el atributo controls para permitir que los usuarios gestionen la reproducción de audio o video;
  4. Utiliza el atributo src para especificar la ubicación del archivo. Asegúrate de copiar correctamente los enlaces desde la tarea;
  5. Utiliza type="audio/mp3" para especificar el tipo de archivo correcto para el audio;
  6. Utiliza type="video/mp4" para especificar el tipo de archivo correcto para el video.
Solución
expand arrow
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <header>
      <h1>Welcome to Multimedia</h1>
      <p>Enjoy the audio and video content below!</p>
    </header>

    <section>
      <div>
        <!-- Audio file -->
        <audio controls>
          <source
            src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/just-relax-audio.mp3"
            type="audio/mp3"
          />
        </audio>
      </div>
    </section>

    <section>
      <div>
        <!-- Video file -->
        <video controls>
          <source
            src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/tiger-video.mp4"
            type="video/mp4"
          />
        </video>
      </div>
    </section>
  </body>
</html>
¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 7

Pregunte a AI

expand

Pregunte a AI

ChatGPT

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

Sección 4. Capítulo 7
some-alt