Зміст курсу
Ultimate HTML
Ultimate HTML
Вбудовування Аудіо та Відео для Насиченого Медіаконтенту
Вбудовування аудіо
Ви можете використовувати елемент <audio>
, щоб додати аудіофайли на вебсторінку. Розглянемо приклад:
index.html
У цьому прикладі:
Елемент
<audio>
містить елемент<source>
, який вказує URL-адресу та тип файлу аудіо. Поширені підтримувані формати — MP3 та OGG;Атрибут
controls
відображає стандартні елементи керування відтворенням, такі як відтворення, пауза та гучність;Якщо браузер користувача не підтримує елемент audio, буде показано резервне повідомлення.
Додаткові атрибути, які часто використовуються з елементом HTML audio:
autoplay
: відтворює аудіофайл одразу після завантаження сторінки;loop
: забезпечує безперервне повторення аудіофайлу;muted
: вимикає звук аудіо за замовчуванням;volume
: визначає початковий рівень гучності для аудіофайлу, у діапазоні від 0.0 (без звуку) до 1.0 (максимальна гучність).
Приклад, що демонструє використання всіх цих атрибутів:
index.html
Вбудовування відео
Ви можете вбудовувати відеофайли на веб-сторінку за допомогою елемента <video>
. Розгляньте наступний приклад:
index.html
У цьому прикладі:
Елемент
<video>
містить елемент<source>
, який вказує URL-адресу та тип файлу відео. Поширені підтримувані формати: WebM, MP4 та OGG;Атрибут
controls
відображає стандартні елементи керування відтворенням;Якщо браузер користувача не підтримує елемент video, буде показано резервне повідомлення.
Поширені атрибути для елемента HTML video включають:
autoplay
: автоматичний запуск відеофайлу при завантаженні сторінки;loop
: безперервне повторення відеофайлу;muted
: вимкнення звуку за замовчуванням;volume
: визначає рівень гучності для аудіофайлу за замовчуванням, у діапазоні від 0.0 (без звуку) до 1.0 (максимальна гучність);poster
: вказує URL зображення, яке відображається як мініатюра відео до початку відтворення;width
таheight
: визначають ширину та висоту відеоплеєра у пікселях.
Ось приклад, що демонструє використання всіх цих атрибутів:
index.html
Примітка
Додатково існує багато JavaScript-бібліотек та API, які надають розширені можливості для відтворення та керування відеоконтентом у вебі.
Дякуємо за ваш відгук!