Від автора: за останні пару років ми помічаємо все більше і більше веб-сайтів з незвичайною дизайнерської особливістю – фоновим відео. Зі збільшенням швидкості інтернету, поліпшенням відео кодеків і найкращою підтримкою браузерами HTML5 відео даний тренд буде тільки рости. У даній статті я дам Вам 10 порад, як поліпшити фонове відео для сайту.
Якщо погано підійти до розробки, фонове відео може негативно позначитися на відчуттях користувачів. Сайт сповільнюється, і фонове відео починає відволікати користувача від основного вмісту. Якщо відео занадто широке, це може заплутати користувача.
Тим не менш, якщо ґрунтовно підійти до цього питання, фонові відео можуть виглядати просто чудово відмінно. Тонке доповнення до дизайну, залишає пелену задумі. Так як же уникнути помилок і робити все правильно? Дуже просто, просто дотримуйтесь 10 порад.
Стискайте відео як можна сильніше
Не може бути нічого гірше при відвідуванні сайту, ніж постійні гальма відео під час буферизації. Все це вкрай відволікає і залишає відчуття, що гальмує весь сайт, навіть коли той завантажився повністю.
Щоб уникнути таких проблем ми рекомендуємо якомога сильніше стискати відео до найнижчого прийнятного бітрейта. Заманливо було б використовувати відео високої якості. Відео 1080p виглядає чудово, але довге завантаження і постійні переривання того не варті.
Насправді переважно використовувати 720p відео з низькою частотою кадрів в 24/25 кадрів в секунду. Перед вибором необхідно протестувати бітрейт 750к і 1250к і вибрати підходящий для вас. Трохи пізніше ми розповімо про способи приховати огріхи якості відео.
Використовуйте спеціальні шари щоб приховати артефакти
Якщо ви не задоволені якістю відео або якість відмінна, але воно не підходить для плавного стрімінг, краще поверх відео накласти спеціальний шар, який приховає недоліки. Зробити це можна дуже легко, просто додавши абсолютно зорієнтований div прямо після ролика, або ж можна для контейнера відео додати псевдо-клас ::after.
Щоб заблокувати можливість викликати контекстне меню правою кнопкою миші, де можна зупинити відео, до ролика необхідно додати CSS властивість pointer-events: none;.
Монотонний колірний фон і напівпрозорий шар для накладення тільки допоможуть і додадуть відео дуже гарний вигляд. Якщо ж ви зможете поєднати кольори відео з колірною гамою іншого сайту, зовнішній вигляд стане ще краще. Побачити ефект накладання можна на сторінці демо з накладенням шаблону на відео низької якості.
Обмежте максимальний розмір і довжину відео
Низький бітрейт відео допоможе програвати відео гладко і без буферизації. Але не можна думати, що користувач приходить на наш сайт, щоб подивитися фонове відео. Користувач може бути далеко не радий, коли його змушують завантажувати двохвилинне відео, яке може важити до 20Мб.
Максимальна довжина відео, яке ви можете собі дозволити, це 30-40 секунд. А ще краще знайти відмінно зациклене відео, яке буде здаватися довгим, а важити усього лише від 1-2Мб. На сайті BG Stock можна знайти спеціальні плагіни з добре зацикленими відео. Цей сайт допоміг мені знайти безліч фонових відео.
Уникайте зайвих рухів в відео
Ключове слово в словосполученні «фонове відео» це «фонове». Це дуже чітке визначення, відео доповнює основний контент, а не відволікає від нього увагу на себе. Щоб користувачі не відволікалися від основного завдання сайту, фонові відео повинні бути дуже короткими і плавними. А значить, варто уникати швидкого відео, великої кількості рухів, занадто широких відео, трясіння/нестабілізованих кадрів, а також швидких нарізок.
Забезпечте хороший контраст відео з накладеним текстом
Якщо поверх вашого відео є текст, необхідно переконатися, що він читаємо. Якщо колір тексту співпадає з відео, вам знадобиться додати спеціальний шар, змінити колір тексту або додати властивість text-shadow або фон.
Також варто уникати зайвої контрастності. Наприклад, на малюнку нижче дуже важко розташувати текст поверх кадру. На зображенні присутні як світлі тони, так і темні, і текст буде збігатися з одним з них.
Відео повинне займати всю ширину свого контейнера
У CSS3 є чудова властивість ‘background-size’. У нього є значення ‘cover’. Дана властивість гарантує, що фонове зображення буде займати всю доступну область контейнера. Ні більше ні менше, зберігаючи співвідношення сторін.
Є менш відоме властивість ‘object-fit’, що працює з DOM схожим чином. Цю властивість можна використовувати для повного заповнення контейнера відео роликом. На жаль, на даний момент дана властивість погано підтримується в браузерах. А значить, краще скористатися полифиллом або особисто імітувати поведінку властивості з допомогою JS.
По щасливою випадковості є простий JQuery плагін jQuery Background Video, який полегшить нам завдання. Дисклеймер: плагін написаний мною.
Підтримка різних пристроїв
На даний момент фонове відео погано підтримується на мобільних пристроях. iOS не підтримує авто програвання відео і додає поверх ролика велику іконку плей, після натискання на яку відкривається медіа плеєр.
На звичайній сторінці вставка відео виглядає нормально, але це лише дизайнерський штрих і відео не несе ніякої критичної інформації. Так що краще всього додати фолбек у вигляді звичайного фонового зображення. Фонове відео на Android пристроях відтворюється також погано. В обох випадках краще просто додати зробити фолбек фоновим зображенням.
Як це зробити – залежить від вас. Можна з допомогою CSS медіа запитів приховувати відео на маленьких екранах. Також можна перевіряти браузер користувача за допомогою JS, і якщо це пристрої Android/iOS, то просто видаляти відео з розмітки. В плагіні jQuery Background Video останнім робиться за замовчуванням.
Не зацикливайте відео навічно
Якщо додати до тегу відео атрибут ‘loop’, то браузер буде зациклювати відео до закриття вкладки. Це сильно навантажує CPU і може сповільнити всю сторінку.
Також можна видалити атрибут циклу і програти відео один раз. Але в більшості випадком наше відео буде коротким, і такий спосіб нам не підійде. За допомогою JavaScript можна написати пару рядків і зупиняти відео після Х секунд. Якщо відео зупиняється вручну, необхідно просто скинути таймер (в більшості браузерів це можна зробити за допомогою правої кнопки миші). Як і в інших JS плагінах, jQuery Background Video можна вручну вказати час ‘pause after’ в секундах.
Додайте кнопку паузи
Не важливо наскільки на вашу думку хороше фонове відео, будуть люди, які захочуть його зупинити. Людина може відчувати, що відео гальмує його комп’ютер, а також може думати, що відео ніколи не зупиниться. З допомогою JS можна легко додати кнопку паузи. Але в jQuery Background Video дана кнопка відображається за умовчанням. Налаштувати стилі і зорієнтувати цю кнопку можна самостійно.
Додайте плавне поява при старті відео
Запам’ятайте, фонове відео має бути ледве помітним і не відволікаючим. Різкі рухи при старті відео можуть відвернути користувача. Хорошою ідеєю буде додати плавне поява тег video при старті відео.
Можна спочатку додати фонове зображення для тега video, задавши прозорість відео на нуль за замовчуванням. Потім додати CSS властивість transition і плавно змінювати значення opacity 0, 1при старті відео. Якщо ви не хочете робити це самостійно, то jQuery Background Video вже зробив це за вас.
Також добре буде виглядати плавне загасання відео при натисканні на паузу. Особливо у випадку, якщо наш постер-замінник відео кращої якості ніж відео.
Висновок
Фонове відео насправді допоможе виділити ваш веб-сайт серед маси інших. Головне зробити це правильно. Дотримуйтесь цих 10 порад і ви будете на вірному шляху.
