Від автора: вітаю вас, дорогий читачу. Сьогодні ми розберемося з питанням, як вставити відео в html5, а також я постараюся відзначити помітний прогрес у вставці медіафайлів на веб-сторінку.
Що нам дає html5 для вставки відео?
Багато хто знає, що одним з головних нововведень в новій специфікації стала поява спеціальних тегів для вставки аудіо і відеофайлів на сторінці. Вони повинні були значно спростити цей процес, тому що до їх появи все було досить сумно.
Тепер можна з упевненістю сказати – закінчилося час старих, неправильних способів вставки подібних файлів.
Елементи video і audio дозволили додати на сторінку потрібний медиафайл без додавання всяких додаткових плагінів, простіше кажучи, без проблем.
Чому тегом video варто користуватися?
Можливо, ви знаєте, що деякі можливості HTML5 ще дуже мало підтримуються. Так от, тег video відноситься до тієї частини специфікації, яка підтримується практично повністю. Звичайно, не в IE6, але кому він зараз потрібен? Якщо говорити про нормальних, більш-менш сучасних браузерах, то всі вони зможуть зрозуміти цей тег і правильно обробити його.
Від теорії до справи
Добре, переходимо до практики. Як вставити відео на сайті? Як я вже говорив, для цього потрібно використовувати парний тег video. Нагадаю вам, що перед використанням html5 елементів корисно робити наступне:
1. Вказати правильний доктайп:
2. Вказати тип нових елементів як блочний: Video (і інші нові теги)
{
display: block;
}
Тепер ми зробили достатньо, щоб нормальні браузери нормально відобразили ці елементи.
Власне, якщо говорити про вставлення медіафайлів, то потрібно вказати браузеру шлях до самого файлу. Це ми зробимо, але проблема в тому, що різні браузери підтримують різні формати і те, що працюють в одному, не працює в іншому.
Наприклад, Chrome (найкрутіший браузер підтримує всі формати ogg, mp4, webm), а IE тільки mp4. Так от, якщо ви хочете кросбраузерності, то доведеться вказувати кілька форматів, тобто для початку нам потрібно наше відео сконвертувати в 3 формату, потім закинути на сервер, і тільки після цього вставляти. Як? За допомогою тегів source:
Загалом, ось такий досить звичний синтаксис, але все ж у ньому є дещо нове. Наприклад, в атрибуті type спочатку потрібно вказати MIME-тип файлу, а після цього кодеки, які потрібні для його відтворення.
В цілому, кодеки вам не потрібно чіпати – їх просто копіюємо, теж саме з типом MIME. Вам потрібно лише вказати правильний шлях до файлу, щоб все запрацювало як треба. На веб-сторінці з’явився наш ролик. Щоб у нього були елементи управління, потрібно додати порожній атрибут controls.
Атрибути тега video
Цей елемент підтримує дуже багато корисних атрибутів, які дозволяють керувати ним. Давайте коротко розглянемо їх все:
Autoplay – порожній атрибут без значення. Якщо його вказати, відтворення почнеться автоматично після повного завантаження сторінки. Такий трюк часто роблять на продають сторінках, щоб миттєво привернути увагу людини.
Controls – дуже важливий параметр, теж без значення. Він додає елементи управління. Власне, він використовується практично завжди, тому що потрібно надати людині можливість ставити відео на паузу або перемотати.
Loop – якщо цей параметр активний, відтворення почнеться спочатку після того, як воно завершилося. Іноді це цілком доречно. Наприклад, якщо ролик дуже цікавий.
Preload – ще один цікавий параметр, при його додаванні відео почне завантажуватися разом із завантаженням сторінки. Таким чином, коли людина захоче його подивитися, воно вже може бути частково або повністю завантажене, що добре, оскільки людині не доведеться чекати.
Це одна сторона медалі. Але у багатьох сьогодні провідний інтернет і жодних проблем із завантаженням і так не виникне. До того ж, важливо пам’ятати про користувачів, у яких не безлімітний трафік – автоматичне завантаження без їх бажання, може їх не порадувати.
Poster – в якості значення цього атрибуту передається шлях до зображення, яке стане мініатюрою до ролика. В цілому, це може мати значення – красива, привертає увагу картинка може спонукати користувача до перегляду. C допомогою параметра poster можна задати шлях до зображення, яке буде видно до початку відтворення нашого ролика. Наприклад:
Всі дані атрибути записуються в контейнері video, а не в одинарних тегах source. У них потрібно вказувати тільки шлях до файлів та типи MIME.
Я тут не вказав ще два параметри – ширина і висота, але я вважаю, що їх правильніше буде налаштувати вже в css. Там же до тегу video можна застосувати багато інших властивостей, хоча не всі з них можуть подіяти.
Як вставити відео з youtube
Але якщо відеоролик є на youtube і його вам потрібно вставити в свій запис, як це зробити? Тут я бачу як мінімум два варіанти. По-перше, у самого ролика на youtube є блок «Поділитися». Там можна взяти html-код, який потім потрібно вставити у редакторі (в режимі html).
По-друге, якщо у вас сайт на wordpress, то там можна просто по ходу запису в потрібному місці вставити адресу відео, і движок автоматично вмонтує його на сторінку в цьому місці. Це найпростіший спосіб і він працює. WordPress бере все на себе.
З появою нових тегів вставка медіафайлів на веб-сторінку значно спростилася. Безсумнівно, будь-якого веб-розробнику потрібно знати, як це робиться. До того ж, з допомогою селектора video або стильових класів ви можете додатково оформити свої ролики, додати їм рамку або якісь інші декоративні елементи. На цьому я закінчую цю статтю, залишайтеся з webformyself, щоб збільшувати свої знання в області сайтобудування.
