- Стискайте відео, наскільки це можливо
- Використовуйте накладення для приховування артефактів
- Обмежуйте загальний розмір і довжину відео
- Уникайте надмірного руху
- Забезпечте достатній контраст для тексту на передньому плані
- Забезпечте заповнення фоном всього контейнера
- Адаптуйте для різних пристроїв
- Не зациклюйтеся відео назавжди
- Додайте кнопку паузи
- передбачте загасання
Останні кілька років ми все частіше бачимо сайти, які використовують фонові відео в якості елемента дизайну. І цей тренд буде тільки рости, адже швидкість інтернет з'єднання збільшується, видеокодеки удосконалюються, а браузерна підтримка HTML5 відео стає все ширше.
При поганій реалізації фонове відео може викликати негативні наслідки у вигляді уповільнення швидкості сторінки, відволікання користувача від її основного вмісту і навіть погіршення самопочуття користувачів, якщо в відео занадто багато руху або панорамування.
Однак при гарній реалізації, фонове відео може спрацювати як легкий дотик дизайну, що додає сайту новий шар сприйняття.
Так як нам уникнути помилок і зробити все правильно? Легко, просто дотримуйтесь цих 10 порад.
Стискайте відео, наскільки це можливо
Немає нічого гіршого, ніж відвідування сайту, фонове відео на якому постійно спотикається при спробах буферизації. Це відволікає і створює відчуття, що весь сайт гальмує, навіть якщо все інше вміст вже завантажено.
Щоб уникнути цього, треба стиснути відео до мінімального прийнятного для нас бітрейта. Є спокуса використовувати високоякісне відео з роздільною здатністю 1080p , Щоб підвищити чіткість і красу, але це абсолютно не варто компромісу зі збільшенням часу завантаження і переривається стрімінга.
Вам варто використовувати відео 720p з низькою частотою кадрів (24-25 кадрів в секунду) і протестувати кілька різних бітрейтів від 750k до 1250k. Також є кілька хаков, які допоможуть приховати низьку якість відео, але про них трохи пізніше.
Використовуйте накладення для приховування артефактів
Якщо вас не радує якість вашого відео, або ж у відео, що влаштовує вас якості, є проблеми з плавністю, вам варто спробувати додати шар-накладення до відео, що допоможе замаскувати його якість. Це легко робиться шляхом додавання абсолютно позиційований div відразу після відео або з використанням псевдо-елемента :: after в контейнері відео.
Вам треба застосувати до цього елементу властивість CSS pointer-events: none ;, щоб він не перешкоджав керуванню програванням відео.
Напівпрозоре накладення рівного кольору може виглядати непогано, особливо якщо налаштувати накладення кольору відповідно до кольорів решти вашого дизайну. Накладення з патерном може виглядати ще краще, але його складніше поєднувати з дизайном.
Щоб побачити накладення в дії, перевірте це демо з паттернами-накладеннями і відео низької якості.
Обмежуйте загальний розмір і довжину відео
Низький бітрейт допомагає забезпечити плавність відтворення відео без пауз для буферизації, але не можна забувати про те, що користувачі приходять на сайт не для того, щоб дивитися фонове відео. Не варто розраховувати на те, що вони будуть раді скачати 20 мегабайт двухминутного відео.
Завжди обмежуйте довжину вашого відео в рамках 30-40 секунд, а краще ще коротший момент, бесшовно закільцований і виглядає як довге відео, але розміром не більше 1-2 мегабайт. Трохи реклами: ви можете знайти кілька непоганих закільцьованих відео на BG Stock , Цей відеосток я створив спеціально для використання відео в якості фону на сайтах (втім, вистачає і інших відеостоков ).
Уникайте надмірного руху
Ключове слово в поєднанні "фонове відео" - "фонове". Відео відіграє допоміжну роль по відношенню до контенту сайту і ми повинні забезпечити, щоб воно не перетягувати увагу на себе. Фонові відео повинні бути ненав'язливими і плавними, щоб не відволікати користувачів від того, для чого вони прийшли на сайт. А, значить, треба уникати швидкого або надмірного панорамування, тремтячою / нестабилизированной зйомки і раптового обриву відео.
Забезпечте достатній контраст для тексту на передньому плані
Якщо на тлі відео є текст, важливо, щоб він був читабельним. Якщо колір тексту стикається з відео, треба додати накладення, щоб виділити текст або ж додати тексту тінь або фоновий колір.
Цьому також допоможе відсутність різких колірних контрастів в вашому відео. Наприклад, дуже важко розмістити текст без втрати читаності на тлі подібного відео (див. Зображення нижче) через чергування в ньому темних і світлих ділянок, перетин з одним з яких спричинить низьку контрастність.
Забезпечте заповнення фоном всього контейнера
В CSS3 є відмінне і широко відоме властивість background-size і одна з його можливих значень cover дозволяє фонового зображення займати стільки простору, щоб закривати весь елемент, ні більше і ні менше, зберігаючи при цьому оригінальне співвідношення сторін.
І є менш відоме властивість object-fit, що дозволяє проробляти той же трюк з елементами DOM, що є відмінним способом забезпечити заповнення нашим відео контейнера. На жаль, підтримка в браузерах цієї властивості поки недостатня (привіт, IE!) , Тому доводиться використовувати поліфілл або JavaScript для досягнення такої поведінки.
Найпростіший варіант: jQuery плагін jQuery Background Video (написаний автором цієї статті - Енгусом Расселом) , Який бере всі ці турботи на себе, а також робить кілька інших корисних речей. Це не єдиний плагін jQuery для фонового відео.
Адаптуйте для різних пристроїв
На даний момент підтримка фонового відео на мобільних пристроях не дуже хороша. iOS відключає Автовідтворення відео, розміщуючи на відео велику іконку відтворення, після натискання на яку і запускається відео.
Якби ми поміщали звичайне відео на нашу сторінку, то така поведінка була б прекрасним, але так як наше відео це лише елемент дизайну, то нам потрібен запасний варіант у вигляді фонового зображення. А так як у Android пристроїв також є проблеми з відтворенням, в обох випадках краще відключити відео і використовувати фонове зображення.
Як ви це зробите залежить від вас - ви можете заховати відео на маленьких екранах за допомогою медіа-запиту або видаливши відео для всіх пристроїв iOS / Android, після перевірки користувальницького агента з JavaScript. Плагін jQuery Background Video робить це за замовчуванням.
Не зациклюйтеся відео назавжди
Якщо ви додасте атрибут loop до тегу video, ваш браузер буде його відтворювати аж до закриття вкладки. Це споживає ресурси процесора і може сповільнити продуктивність решти сторінки.
Ви можете видалити цей атрибут і відтворити відео один раз, але в більшості випадків у нас короткий зациклена відео і цей спосіб нам не підходить. Простіше написати код JavaScript, який зупиняє відтворення через певний час і скидає таймер, якщо відео зупинено або запущено вручну (в більшості браузерів для цього достатньо кліка правою клавішею миші).
Вищезгаданий плагін jQuery Background Video дозволяє налаштувати зупинку відтворення відео через зазначений час.
Додайте кнопку паузи
Незалежно від ступеня вашого захоплення фоновим відео, обов'язково знайдуться люди, яким захочеться поставити його на паузу. Воно може не сподобається їм, може створити враження уповільнення роботи комп'ютера, а може вони просто не розраховують на те, що воно зупиниться саме.
Ми можемо легко додати кнопку паузи за допомогою JavaScript - а в jQuery Background Video ця кнопка додається за замовчуванням і вам треба лише визначитися з її розміщенням і стилями.
передбачте загасання
І ще раз: наш фонове відео повинно бути ненав'язливим. Раптові руху при початку його відтворення можуть відвернути користувача, тому в більшості випадків буде хорошою ідеєю при запуску відео створити ефект загасання.
Ми можемо зробити це, додавши зображення в якості фону для елементу, що містить <video> і задавши відео прозорість 0 за замовчуванням (1 при початку відтворення), а також додавши CSS-перехід властивості прозорості. Це теж є в плагіні jQuery Background Video.
Також має сенс додавати загасання при паузі відео, особливо якщо заміщає зображення більш високої якості, ніж відео.
Так як нам уникнути помилок і зробити все правильно?