Відео та аудіо в HTML/CSS. Курси для дітей Академмістечко

Відео та аудіо контент на сторінці – розглянемо в цій статті. Спочатку розберемося з форматом відео файлів. Формат відеофайла- це структура, що має відео дані, які зберігаються на карті пам’яті і якими відео кодеками вони зашифровані.

На сьогоднішній момент існує 3 підтримуваних форматів відео для елемента html5 <video>:

Браузер	MP4	WebM	Ogg
Chrome	ТАК	ТАК	ТАК
Firefox	ТАК	ТАК	ТАК
Opera	ТАК	ТАК	ТАК
Safari	ТАК	НІ	НІ
IE	ТАК	НІ	НІ
Edge	ТАК	НІ	НІ

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

Відео: інструкція по додаванню

<! DOCTYPE html>

<html>

<head>

<title> Приклад використання тега <video></title>

</head>

<body>

<h1>Видео в HTML5</h1>

<video width = “320” height = “240” poster = “10.jpg” controls> <source src = “123.mp4” type = “video/mp4″>

Ваш браузер не підтримує відео тег.

</video>

</body>

</html>

У цьому коді ми бачимо:

Додали на сторінку відео (тег <video>) шириною 320 пікселів і висотою 240 пікселів (атрибути width = “320” height = “240”), атрибут poster – вказує місце розташування зображення, щоб воно з’явилося перед запуском відео (якщо атрибут не вказаний, то відображається перший кадр відео). Часто цим атрибутом користувачів вводять в оману (відсутність того контенту, яка зображена на картинці).

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

Використовували тег <source>, який дозволяє вказати кілька варіантів формату відео (в цьому випадку браузер зможе вибрати відповідний формат для завантаження і відтворення). Щоб підвищити ефективність роботи користувача, при використанні декількох форматів потрібно вказувати в тегах <source> атрибут type (MIME-типи для відео):

Формат	MIME-типи
MP4	video/mp4
Ogg	video/ogg
WebM	video/webm

Завдяки тегу <track> додали субтитри до відео:

Додали шлях до файлу атрибутом src.

Встановили тип доріжки – субтитри kind = “subtitles” (даний параметр встановлюється за замовчуванням, також доступні навігаційні параметри, метадані та параметри для людей з обмеженими можливостями).

Встановили мову доріжки srclang = “ru”.

Відобразили назви двох доріжок label = “English”, label = “Russian”.

Вибрали доріжку за замовчуванням атрибутом default.

Результат нашого прикладу:

Відео

Допускається додавати відео файли з використання спрощеного синтаксису (без використання тега <source>), але такий запис буде актуальна якщо всі браузери підтримують даний формат відео:<video src = “123.mp4” width = “320” height = “240” poster = “10.jpg” controls> Ваш браузер не підтримує той відео формат. <!–Текст буде видно тільки тим, у кого браузер не підтримує цей вфдео формат –> Ви можете скачати цей файлза посиланням. </video>

Інші, часто використовувані атрибути елемента <video>:

Атрибут	Значення атрибута
autoplay	Задає автоматичне відтворення відеоролика (намагайтеся не використовувати цей атрибут без необхідності – дратує, коли за тебе вирішують, коли має розпочатися відтворення відео контенту).
loop	Зациклює відтворення відеоролика (наша пісня гарна й нова – починаймо її знову).
muted	Щоб відтворити відеокліп з відключеним звуком.

Додавання аудіо на HTML сторінку

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

Браузер	MP3	Wav	Ogg
Chrome	ТАК	ТАК	ТАК
Firefox	ТАК	ТАК	ТАК
Opera	ТАК	ТАК	ТАК
Safari	ТАК	ТАК	НІ

Елемент <audio> використовує ті ж атрибути, що і елемент <video>, за винятком атрибутів width (ширина), height (висота) і poster (зображення, яке відображається до відтворення відео). За таким же принципом з використанням елемента <video>, ви можете надати кілька варіантів аудіо форматів за допомогою елемента <source>, як показано в прикладі нижче:

<! DOCTYPE html>

<html>

<head>

<title> Аудіо в HTML5 </title>

</head>

<body>

<h1>Аудио в HTML5</h1> <audio controls>

<source src = “sound.mp3” type = “audio/mp3″>

<source src = “sound.ogg” type = “audio/ogg“>

Ваш браузер не підтримує цей аудіо формат. <!–Текст буде видно тільки тим у кого браузер не підтримує цей аудіо формат–>
Ви можете завантажити цей файл за посиланням нижче: <p><a href = “sound.rar“>Скачати</a></p>

</audio>

</body>

</html>
У цьому прикладі ми:

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

Використовували тег <source>, який дозволяє вказати кілька варіантів формату відео (в цьому випадку браузер зможе вибрати відповідний формат для завантаження і відтворення). Щоб підвищити ефективність роботи браузера, необхідно вказувати в тегах <source> атрибут type (MIME-типи для аудіо):

Формат	MIME-типи
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

Результат нашого прикладу:

Допускається додавати аудіо файли з використанням спрощеного синтаксису (без використання тега <source>), але такий запис буде актуальна якщо всі браузери підтримують даний формат аудіо:

Ми постаралися доступно пояснити вам як додати аудіо та відео в HTML \ CSS. А перевірити як ви засвоїли цю тему ви можете – пройшовши тест у верхній частині сторінки. А пройти курс HTML \ CSS і створити власний сайт ви можете у нас в офісі на м. Академмістечко або в форматі онлайн.