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

Вбудовування аудіофайлів

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

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

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

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

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

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

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

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

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

• Елемент <video> містить елемент <source>, який вказує URL-адресу і тип відеофайлу. Зазвичай підтримуються формати WebM, MP4 та OGG;
• Атрибут controls відображає стандартні елементи керування відтворенням;
• Якщо браузер користувача не підтримує елемент відео, буде показано відповідне повідомлення.

До найпоширеніших атрибутів HTML-елемента video відносяться

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

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

Примітка

Крім того, існує багато бібліотек JavaScript та API, які надають додаткову функціональність для відтворення та маніпулювання відеоконтентом в Інтернеті.