Вивчайте Завдання: Вбудування аудіо та відео в HTML

Свайпніть щоб показати меню

Мета

Створення захопливого мультимедійного досвіду для відвідувачів сайту шляхом додавання аудіо- та відеоконтенту.

Завдання

Підвищення рівня сайту шляхом занурення користувачів у захопливий мультимедійний досвід. Ваше завдання:

Для аудіо: вставити аудіофайл, який створює заспокійливу атмосферу для відпочинку користувачів. Використайте наступне посилання для аудіо:

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

Для відео: інтеграція відео, яке дозволяє користувачам насолоджуватися красою природних створінь. Використовуйте наступне посилання для відео:

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

Додавання елементів керування відтворенням, таких як відтворити та пауза.
Додавання типів файлів.

index.html

index.css

Підказка

Використання тега <audio> для визначення аудіоелемента;
Використання тега <video> для визначення відеоелемента;
Використання атрибута controls для надання користувачам можливості керувати відтворенням аудіо або відео;
Використання атрибута src для вказання розташування файлу. Переконайтеся, що посилання скопійовано точно з завдання;
Використання type="audio/mp3" для вказання правильного типу файлу для аудіо;
Використання type="video/mp4" для вказання правильного типу файлу для відео.

Розв'язок

<!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>

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 4. Розділ 7

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Секція 4. Розділ 7