Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вивчайте Завдання: Вбудовування Аудіо та Відео в HTML | Робота з Медіа та Таблицями
Ultimate HTML

book
Завдання: Вбудовування Аудіо та Відео в HTML

Мета

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

Завдання

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

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

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

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

index.html

index.html

index.css

index.css

copy
<!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>
<!-- Insert audio file -->
<___ ___>
<source src="___" type="___" />
</___>
</div>
</section>

<section>
<div>
<!-- Insert video file -->
<___ ___>
<source src="___" type="___" />
</___>
</div>
</section>
</body>
</html>

  1. Використати тег audio для визначення аудіоелемента.

  2. Використати тег video для визначення відеоелемента.

  3. Використати атрибут controls, щоб дозволити користувачам керувати відтворенням аудіо або відео.

  4. Використати атрибут src для вказання розташування файлу. Переконатися у точному копіюванні посилань із завдання.

  5. Використати type="audio/mp3" для вказання правильного типу файлу для аудіо.

  6. Використати type="video/mp4" для вказання правильного типу файлу для відео.

index.html

index.html

index.css

index.css

copy
<!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>
Все було зрозуміло?

Як ми можемо покращити це?

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

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

Запитати АІ

expand

Запитати АІ

ChatGPT

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

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