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

Зміст курсу

Ultimate HTML

Ultimate HTML

1. Розуміння веб-розробки
3. Структура HTML-Документа

book
Вбудовування Аудіо та Відео для Насиченого Медіаконтенту

Вбудовування аудіо

Ви можете використовувати елемент <audio>, щоб додати аудіофайли на вебсторінку. Розглянемо приклад:

html

index.html

copy

У цьому прикладі:

  • Елемент <audio> містить елемент <source> , який вказує URL-адресу та тип файлу аудіо. Поширені підтримувані формати — MP3 та OGG;

  • Атрибут controls відображає стандартні елементи керування відтворенням, такі як відтворення, пауза та гучність;

  • Якщо браузер користувача не підтримує елемент audio, буде показано резервне повідомлення.

Додаткові атрибути, які часто використовуються з елементом HTML audio:

  • autoplay : відтворює аудіофайл одразу після завантаження сторінки;

  • loop : забезпечує безперервне повторення аудіофайлу;

  • muted : вимикає звук аудіо за замовчуванням;

  • volume : визначає початковий рівень гучності для аудіофайлу, у діапазоні від 0.0 (без звуку) до 1.0 (максимальна гучність).

Приклад, що демонструє використання всіх цих атрибутів:

html

index.html

copy

Вбудовування відео

Ви можете вбудовувати відеофайли на веб-сторінку за допомогою елемента <video>. Розгляньте наступний приклад:

html

index.html

copy

У цьому прикладі:

  • Елемент <video> містить елемент <source> , який вказує URL-адресу та тип файлу відео. Поширені підтримувані формати: WebM, MP4 та OGG;

  • Атрибут controls відображає стандартні елементи керування відтворенням;

  • Якщо браузер користувача не підтримує елемент video, буде показано резервне повідомлення.

Поширені атрибути для елемента HTML video включають:

  • autoplay : автоматичний запуск відеофайлу при завантаженні сторінки;

  • loop : безперервне повторення відеофайлу;

  • muted : вимкнення звуку за замовчуванням;

  • volume : визначає рівень гучності для аудіофайлу за замовчуванням, у діапазоні від 0.0 (без звуку) до 1.0 (максимальна гучність);

  • poster : вказує URL зображення, яке відображається як мініатюра відео до початку відтворення;

  • width та height : визначають ширину та висоту відеоплеєра у пікселях.

Ось приклад, що демонструє використання всіх цих атрибутів:

html

index.html

copy

Примітка

Додатково існує багато JavaScript-бібліотек та API, які надають розширені можливості для відтворення та керування відеоконтентом у вебі.

question mark

Яке з наступних тверджень щодо елементів <audio> та <video> в HTML є правильним?

Select the correct answer

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

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

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

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

Запитати АІ

expand
ChatGPT

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

course content

Зміст курсу

Ultimate HTML

Ultimate HTML

1. Розуміння веб-розробки
3. Структура HTML-Документа

book
Вбудовування Аудіо та Відео для Насиченого Медіаконтенту

Вбудовування аудіо

Ви можете використовувати елемент <audio>, щоб додати аудіофайли на вебсторінку. Розглянемо приклад:

html

index.html

copy

У цьому прикладі:

  • Елемент <audio> містить елемент <source> , який вказує URL-адресу та тип файлу аудіо. Поширені підтримувані формати — MP3 та OGG;

  • Атрибут controls відображає стандартні елементи керування відтворенням, такі як відтворення, пауза та гучність;

  • Якщо браузер користувача не підтримує елемент audio, буде показано резервне повідомлення.

Додаткові атрибути, які часто використовуються з елементом HTML audio:

  • autoplay : відтворює аудіофайл одразу після завантаження сторінки;

  • loop : забезпечує безперервне повторення аудіофайлу;

  • muted : вимикає звук аудіо за замовчуванням;

  • volume : визначає початковий рівень гучності для аудіофайлу, у діапазоні від 0.0 (без звуку) до 1.0 (максимальна гучність).

Приклад, що демонструє використання всіх цих атрибутів:

html

index.html

copy

Вбудовування відео

Ви можете вбудовувати відеофайли на веб-сторінку за допомогою елемента <video>. Розгляньте наступний приклад:

html

index.html

copy

У цьому прикладі:

  • Елемент <video> містить елемент <source> , який вказує URL-адресу та тип файлу відео. Поширені підтримувані формати: WebM, MP4 та OGG;

  • Атрибут controls відображає стандартні елементи керування відтворенням;

  • Якщо браузер користувача не підтримує елемент video, буде показано резервне повідомлення.

Поширені атрибути для елемента HTML video включають:

  • autoplay : автоматичний запуск відеофайлу при завантаженні сторінки;

  • loop : безперервне повторення відеофайлу;

  • muted : вимкнення звуку за замовчуванням;

  • volume : визначає рівень гучності для аудіофайлу за замовчуванням, у діапазоні від 0.0 (без звуку) до 1.0 (максимальна гучність);

  • poster : вказує URL зображення, яке відображається як мініатюра відео до початку відтворення;

  • width та height : визначають ширину та висоту відеоплеєра у пікселях.

Ось приклад, що демонструє використання всіх цих атрибутів:

html

index.html

copy

Примітка

Додатково існує багато JavaScript-бібліотек та API, які надають розширені можливості для відтворення та керування відеоконтентом у вебі.

question mark

Яке з наступних тверджень щодо елементів <audio> та <video> в HTML є правильним?

Select the correct answer

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

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

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

Секція 4. Розділ 5
Ми дуже хвилюємося, що щось пішло не так. Що трапилося?
some-alt