Відео фон для сайту: слід використовувати?

24

Від автора: нам написав читач: «Я вже бачив дуже красиві сайти з відео фоном, але в інтернеті вкрай важко знайти хоч яку-небудь статтю про найкращі практики в цьому напрямку. Я намагаюся відмовляти клієнтів від фонового відео для сайту, навіть якщо з ними складно сперечатися. Адже це виглядає круто, якщо все зробити правильно. «Поглянь на сайт мого конкурента, у нього є фонове відео! Значить, і ти зможеш!!», кажуть клієнти. Проблема, з якою мені довелося зіткнутися, полягає в тому, що замовник надсилав відео або жахливе/низькоякісне, або розмір файлу був настільки величезний, що користувачі не чекали завантаження і йшли з цього сайту без оглядки.»

Це «просто тренд»?

Мені не здається, що відео це тенденція, а от відео на весь екран на домашній сторінці з білим текстом поверх нього – ось це тренд. Не те, щоб це було погано. Замість слова тренд можна вимовляти «бути в моді», а люди схильні довіряти модним напрямками.

Даний тренд хоча б триває вже кілька років. Постів типу «60 красивих прикладів веб-сайтів з повномасштабним фоновим відео» вже більше трьох років (наскільки я можу судити). А люди на щось вийшло з моди, як правило, закочують очі.

Іноді тенденції позитивно позначаються на результаті. З першого погляду непотрібне дослідження показало, що тренд паралакса прокрутки не чинить негативного впливу на юзабіліті, задоволення, задоволення та візуальну привабливість сайту, але і бавить користувачів. Це було несподівано, принаймні, для мене.

Поєднується фонове відео з моїм брендом, планами і новим баченням сайту?

Запам’ятайте, це вони наймають вас. Можна навести класичну аналогію з водопровідником, якому ви не повинні говорити, як встановлювати труби. Ви найняли його, тому що він майстер. У нашому випадку компанія найняла вас, тому що ви експерт в цій галузі. Це справедливо до тих пір, поки ви думаєте «я сам скажу, який кран я хотів би встановити».
І все ж, якщо замовник дав вам відео, яке не буде працювати з іншою частиною сайту, так справа не піде.

Відео це просто спосіб передачі, це не звільняє від необхідності дотримуватися бренду. Чи повинна відео підходити під колірну палітру? Потрібен звук? Відео має бути частиною сайту?

Відео з часом буде все більш повсякденним

Чим більше відео буде використовуватися, тим швидше воно буде розвиватися. У Гаррі Поттера рухомі картинки в газетах не викликали подиву, для них це було нормальним.

Якість має бути вкрай високим

І це не з-за розміру файлу, а з-за моїх очікувань від відео. Якщо ви хочете примусити мене дивитися відео, то воно повинно бути приголомшливим. Воно допоможе мені швидше і більш осмислено зрозуміти ваш задум.

Чи завжди потрібен автозапуск відео?

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

Без звуку

Автозапуск не так поганий, коли у відео немає звуку. І будемо чесними, таке відео зараз в моді. Хоча для мене, коли я бачу відео з автозапуском, у мене це викликає реакцію «от блін, треба швидше вимкнути» — м’язова пам’ять.

Продуктивність

Ось він – слон в посудній лавці. Навіть маленьке відео це величезний медіа ресурс. Особливо якщо ви хочете повномасштабне за замовчуванням відео. Особливо якщо вам потрібно позамежне якість, інакше сайт буде виглядати нерозумно.

Ви знаєте, як не вбити всю продуктивність вашого сайту? Є безліч досліджень, і всі кажуть, що низька продуктивність це погано, погано, погано.

Може, варто завантажувати відео після завантаження сторінки? Скористатися технікою Mustard cut? Чи може, просто показати гарний постер замість відео? А може, можна зробити ось так…

Ви знаєте ще якісь трюки? Вбудувати код безпосередньо в HTML? Екстремальне стиснення файлу, або може, стрімінг відео? Обмежити колірну гаму до чорно-білої? Накласти статичний шаблон (точки/лінії), щоб заховати низька якість незвичайним способом? Розумієте?

Бюджет

У вас є так званий «бюджет продуктивності»? Це означає, що велике відео може викликати проблеми в якій-небудь іншій частині сайту на догоду собі. Начебто розумний підхід. Дуже поширений підхід, як тренд на прості сторінки із закликом до якого-небудь дії для переходу на іншу сторінку.

Потрібні сторонні сервіси?

З мого досвіду сервіси типу YouTube або Vimeo вирішують весь спектр больових точок: від пропускної здатності до кросбраузерності. Ви проектуєте плеєр, який буде працювати тільки під вашим дизайном або вам потрібно більш повне рішення?

Чи ви Будете вимірювати ступінь успіху?

Якщо фонове відео це цілий набір різних змін у дизайні сайту, було б гарною ідеєю, налаштувати метрику таким чином, щоб переконатися в тому, що всі внесені зміни мали позитивний характер. Ви вже продумали план дій на випадок, якщо відео негативно позначилося на вашому сайті?

Потрібен код для повноекранного відео?

Я скептично ставлюся до речей типу jQuery plugins. CSS – все що потрібно, щоб зорієнтувати і розтягнути відео в якості фону. Dudley Storey вирішив цю проблему наступним чином:

[CSS]
video.fullscreen {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translate(-50%, -50%);
}
[CSS]

В його демо є невеликий бонус у вигляді паузи:

Його стаття на цю тему покриває кілька інших важливих аспектів. Таких як, як заховати відео на маленьких екранах (якщо хочеться), або як працювати з IE8.