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

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

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

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

index.html

index.html

copy

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

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

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

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

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

index.html

index.html

copy

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

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

index.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: визначають ширину та висоту відеоплеєра у пікселях.

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

index.html

index.html

copy

Примітка

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

question mark

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

Select the correct answer

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

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

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

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

Запитати АІ

expand

Запитати АІ

ChatGPT

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

Awesome!

Completion rate improved to 2.56

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

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

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

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

index.html

index.html

copy

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

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

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

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

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

index.html

index.html

copy

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

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

index.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: визначають ширину та висоту відеоплеєра у пікселях.

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

index.html

index.html

copy

Примітка

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

question mark

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

Select the correct answer

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

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

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

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