Тег використовується для додавання на веб-сторінку аудіофайлу. Так як не всі браузери підтримують всі аудіоформати, аудифайл кодують за допомогою спеціальних кодеків і додають файли одночасно через тег . Для вказівки варіацій одного і того ж аудіо файлу може використовуватися атрибут src . Шлях до аудіофайлу може містити абсолютний URL, так і відносний.

Синтаксис

Вміст тега пишеться між відкриваючим () тегами.

audio> src= "URL" > src="URL" > audio>

приклад

html>
html>
head>
title>Заголовок документа title> head>
body>
audio
controls>
source
src="/build/audios/jingle_bells.ogg"
type="audio/ogg">
source
src="/build/audios/audio.mp3"
type="audio/mpeg"> audio>
p>Натисніть кнопку відтворення p> body> html>

Атрибути

Тег може бути доповнений атрибутами, які вказують шлях до аудіфайлу, вказують, як має програватись аудифайл і т.д.

Коли використовуються атрибути controls, autoplay, loop і muted, їх значення можуть бути опущені. Якщо атрибут вказано, то за умовчанням ця функція вважається увімкненою.

Аудіо та відео в HTML5

До появи HTML5 звукові файли додавали на веб-сторінки, інтегруючи фоновий звук за допомогою тега . Файл програвався під час перегляду сторінки, і користувач не мав можливості вимкнути. З появою в HTML5 нового тега звукові файли додаються із вбудованим програмним інтерфейсом, і немає потреби підключати сторонні модулі.

Як додавати аудіо на веб-сторінку

Для додавання аудіофайлів до веб-сторінки використовується елемент . Шлях до аудіофайлу вказується атрибутом src, а атрибут controls додає панель керування (кнопка запуску, прокручування, регулятор гучності).

У коді виглядає так:

audio src="name.ogg" controls>audio>

Аудіо кодеки та формати звукових файлів

Так як не всі браузери підтримують всі аудіоформати, аудифайл кодують за допомогою спеціальних кодеків (програм для перетворення цифрових даних у формат звукового файлу або звукового потоку) і додають файли одночасно через тег з атрибутом src.

При вказанні різних форматів файлів ми рекомендуємо вказувати MIME-тип для кожного файлу, щоб дати можливість браузеру локалізувати файл, що підтримується. Визначається MIME-тип за допомогою атрибута type.

audio controls> src="name.ogg" type="audio/ogg"> src="name.mp3" type="audio/mpeg"> audio>

Найпопулярнішими аудіо форматами є такі:

MP3 - найпопулярніший аудіо формат, який використовує стиск із втратами і дозволяє зменшити розмір файлу в кілька разів. Незважаючи на популярність серед користувачів, телевізійні компанії та радіостанції використовують сучасніші кодеки ISO-MPEG, такі як AAC або MPEG-H.

AAC (Advanced Audio Codec) - закритий кодек, аналог MP3, але в порівнянні з останнім, забезпечує більш високу якість звучання при тому ж чи сильнішому ступені стиснення.

Ogg Vorbis — безкоштовний формат із відкритим кодом, підтримується у Firefox, Opera та Chrome. Забезпечує гарну якість звуку, проте недостатньо широко підтримується апаратними плеєрами.

Як додавати відео файли

До появи стандарту HTML5 для додавання відео на сайт використовувалися сторонні плагіни на кшталт QuickTime, RealPlayer або Flash. У HTML5 з'явився новий тег, який використовується для вставки відео на веб-сторінку.

У коді це виглядає так:

video src="example.webm." controls>video>

Атрибут src вказує шлях файлу, а атрибут controls використовується для відображення елементів керування. (Докладніше про атрибути тега).

Відео кодеки та формати відео файлів

Кожен браузер підтримує певний кодек, тому щоб забезпечити відтворення відео у всіх браузерах, відео-файл потрібно розміщувати в декількох форматах. Як і у випадку з аудіофайлами, формати відео файлу містяться в елементі формати, починаючи з кращого. Також для кожного відеофайлу необхідно вказувати MIME-тип, який визначається атрибутом type.

Щоб переконатися, що браузер вміє обробляти відеофайли, створіть файл .htaccess у папці, де знаходиться веб-сторінка, яка визначає MIME-типи для відео:

приклад

video controls  width="400" height="300"> src="video.mp4" type="video/mp4">7 --> src="video.webm" type="video/webm"> src="video.ogv" type="video/ogg"> video>

На даний момент існує 3 основних формати відео: MP4/MPEG-4, OGG та WebM+. Для стиснення відео та їх відновлення використовуються кодеки.

Для відео файлу формату MPEG-4 використовуються відео кодек Н.264 та аудіо кодек ААС. Для використання кодеків потрібно отримати ліцензію.

Для відео файлу Ogg використовуються відео кодек Theora та аудіо кодек Vorbis з відкритим кодом.

Для відео файлів у форматі WebM + використовуються відео кодек VP8 та аудіо кодек Vorbis. Для їх використання не потрібна ліцензія.

Як додавати субтитри та заголовки

Субтитри та заголовки до аудіо та відео файлів додається за допомогою елемента , який використовується як дочірній елемент та .

Для вирівнювання відеоплеєра на сторінці, помістіть елемент у контейнер, привласніть клас, для якого задайте ширину та висоту, відповідно до розмірів вашого відео.