Как да вградите видеоклип на фона на героя в началната си страница

Научете как да използвате видео фон в секцията с герои на вашия сайт & защо може значително да увеличи процента на реализация за вашия бизнес.


Как да вградите видео фон на герой

Не е тайна, че видеоклиповете са невероятно ефективни за насърчаване на ангажираността на аудиторията в мрежата. Хората реагират и запомнят визуалните изображения с поразително по-висока скорост, отколкото когато същата информация се представя чрез думи. Нашите мозъци просто обработват изображения по-бързо – да не говорим за опита от гледане на видео е забавно, вълнуващо и – честно казано, пристрастяване. Публиката споделя ненаситен глад за консумиране на видео съдържание, поради което се очаква това да стане в рамките на две години 80% от целия уеб трафик ще бъде обвързан с видео!

Съвременният уеб дизайн вижда огромен тласък към замяната на неподвижните изображения с по-динамични визуализации.

Кликнете, за да щракнете

Не просто думи изпитват страхотна чистка. Съвременният уеб дизайн вижда огромен тласък към замяната на неподвижните изображения с по-динамични визуализации. Изминаха дните, когато статичните уеб страници с текст и снимки бяха достатъчни, за да задоволят ангажираността на потребителите. Видеото е мястото, на което се намира – и сега е време да се запитате дали отсъствието му на вашия уебсайт може да продължи да се игнорира.

Може би основната причина, поради която още не сте приели формата, се дължи на неговите възприемани технически сложности. Въпреки че може да са необходими допълнителни предварителни подготовки и оптимизация, за да получите видеоклипове на уебсайта си, процесът е улеснен достатъчно през последните няколко години с различни плъгини и HTML5.

За помощ при разбирането как да вградите видеоклипове на уебсайта си, това ръководство е тук, за да ви покаже какво трябва да знаете, за да създадете завладяващо визуално изживяване, което потребителите скоро няма да забравят.

Фоновото видео „Герой“

Когато говорим за вграждане на видеоклипове във вашия уебсайт, не говорим само за какъвто и да е вид видео, поставен на произволно място. Тази статия е конкретно за използването на популярна и ефективна тенденция в уеб дизайна, наречена the герой фон видео.

Ето пример:

Пример за движението и приключенията, които един видео фон може да постигнеЕто един добър пример с използване на видео фон за герой. Както можете да видите, видеото осигурява усещане за движение и приключение за това магазин за велосипеди които все още снимки просто не можеха да постигнат.

По-рано споменахме концепцията за използване на образи на герои в „над сгъвката”На вашата уеб страница. За непосветените изображението на герой (или понякога наричано банер) често е първото нещо, което хората виждат, когато пристигат на вашия сайт, където най-важното му съдържание е представено сбито и визуално поразително. Този основен раздел обикновено запълва ширината и височината на целия екран с елегантен фонов образ, оставяйки много отворено пространство около бутона за критично повикване или действие.

Същата концепция важи и тук, освен че очевидно сега заместваме фоновото изображение с видео. Това отначало може да изглежда като сравнително незначителна промяна: Добре, така че преди това имахме снимка на човек, който кара колело, но сега имаме видео на велосипеда в действие и се прави на возене – big whoop, right??

Гледането на прост момент в движение може да създаде огромно въздействие върху начина, по който потребителите ще възприемат и ангажират вашата марка.

Кликнете, за да щракнете

Е, оказва се, че гледането на прост момент в движение може да създаде огромно въздействие върху начина, по който потребителите ще възприемат и ангажират вашата марка. Видеоклиповете вдъхновяват емоцията и действията по-бързо от всеки друг носител. Ако преобразуването е основната ви цел, видеото на заден план може да бъде тайният сос към успешен уебсайт.

Защо да използвате фоново видео?

Има огромни доказателства, които илюстрират колко мощни видеоклипове могат да бъдат за бизнеса. Ето някои мъчителни статистики споделено от Forbes това трябва да послужи като мотивация:

  • Вграждането на основен видеоклип на герой в целевата ви страница може да увеличи процента на реализация с 80%
  • Видеоклиповете с продукти помагат да се повлияе на 90% от клиентите при вземане на решение за покупка
  • 64% от клиентите са по-склонни да купят продукт онлайн, след като гледат видео за него.
  • Експертът по дигитален маркетинг Джеймс Маккуиви оценява това една минута видео съдържание е на стойност 1,8 милиона думи.

Пример за гено фоново видеоБихте ли предпочели да видите Национални паркове, или бихте предпочели опит тях?

Така че сега, когато установихме защо видеосъдържанието е толкова важно, нека най-накрая да видим как да разгърнем тези тъмни неща на вашия уебсайт!

Вграждане на фонови видеоклипове на вашия уебсайт

Вярно е, че има много файлови формати, от които можете да избирате, различни нива на поддръжка на браузъра и различни методи за вграждане на видеоклипове в уеб страница – но аз ще опростя това възможно най-много и просто ще ви кажа само най-подходящата информация , стъпка по стъпка, за да се постигне максимална съвместимост за всички възможни потребители.

Самостоятелно хостинг на вашето видео срещу Използване на хостинг услуга

Първото нещо, което трябва да определите, е къде всъщност ще пребивават видео файловете: на собствения ви сървър на уебсайта (с други думи, вашият собствен уеб хостинг акаунт) или на платформа за видео хостинг като YouTube или Vimeo.

някои предимства на самостоятелно хостинг на видео включвайте по-голяма свобода с това как е вградена, по-лесна имплементация при създаването на видеоклипа на цял екран и повече контрол при защитата на видеото зад портал за осигуряване на приходи (за това ще е необходимо наемане на квалифициран бек-ендър).

някои предимства на видео платформи включвайте леко по-лесно вграждане, използване на бързи сървъри от световна класа (което облекчава честотната лента на вашия собствен сървър), оптимизирани специално за видео файлове и по-широко разпространена способност за споделяне.

Обикновено за видеоклипове с общо предназначение на уебсайт бих препоръчал лекотата на използване на видео платформа за обслужване на вашето съдържание, особено ако сайтът ви е на споделен хостинг план. Въпреки това, спецификата на видеоклипа с фонов герой изисква определени настройки, които се поддават по-добре на самостоятелно хостинг. Може да имате своите причини за използване на двата метода, така че аз ще дам инструкции и за двете.

Метод 1: Самостоятелно хостинг

Първо, видеото трябва да съществува на вашия сървър. Ще обсъдим какъв вид видео файл ви е необходим малко, но засега, точно като добавяне на изображения, ще трябва да използвате FTP програма за да качите вашия видео файл на вашия сървър.

Сега ние ще вмъкнем правилния код във вашата уеб страница, за да служи на магията. HTML5 позволява използването на етикет, който с благодарност заменя Flash като предпочитан уеб формат за видеоклипове. Ето какво трябва да създадем правилен фон за цял екран:

HTML

Изберете код

CSS

видео # bgvideo {
позиция: фиксирана;
отгоре: 50%;
вляво: 50%;
мин. ширина: 100%;
мин. височина: 100%;
ширина: автоматично;
височина: автоматично;
z-индекс: -100;
-ms-трансформация: translateX (-50%) translateY (-50%);
-моз-трансформация: translateX (-50%) translateY (-50%);
-webkit-transform: translateX (-50%) translateY (-50%);
трансформация: translateX (-50%) translateY (-50%);
фон: url (placeholder.jpg) без повторение;
размер на фона: капак;
} Изберете код

Тук се случва доста малко, така че нека разгледаме какво означават тези настройки.

playsinline

Това поддържа видеото в браузъра и успоредно със съдържанието ви, което е важно за предотвратяване на действителното му извеждане на цял екран, където целият ви екран е зает от видеото и нищо друго.

автоматично изпълнение

Най-вероятно ще искате видеото на фона на героя да се възпроизвежда веднага след като страницата се зареди, без да е необходимо натискане на бутон за „възпроизвеждане“. Има обаче няколко проблема с това за мобилните потребители, за които ще говоря по-късно.

заглушен

Освен ако видеоклипът ви не съдържа съществена информация в аудио записа, най-добре е да заглушите фоновото си видео. Хората изпитват изключително неприязън да бъдат посрещнати с неочакван звук, докато сърфирате в интернет, така че е по-добре да изключите звука, отколкото да изключите потребителите си.

контур

Изборът за възпроизвеждане на видеоклипа ви трябва да се прави за всеки отделен случай. Ако искате усещане за окончателност, когато видеото завършва с ясен призив за действие без разсейване, тогава би имало смисъл да оставите тази настройка.

постер

Доставянето на файл с изображения тук ще действа като заместител, докато видеото завърши да се зарежда и възпроизвежда. Ваша преценка е какво би било най-подходящо да се покаже, независимо дали става дума за първия кадър на видеоклипа или нещо като лого или банер.

наш CSS настройките по същество инструктират браузъра да разтегли видеото през цялата страница. Тук трябва да се отбележи заден план настройка използвайки нашата същата постер изображение; това действа като визуална резервна резервация в случай, че старинният браузър не разпознае Имот.

Ако възнамерявате да покажете текст или бутон за призив за действие върху фоновото видео, след това можете да ги добавите както обикновено в рамките на Разделение.

Метод 2: YouTube или Vimeo

Използването на този метод ще предпази видео файловете от вашия сайт, където те вместо това живеят на специализирани сървъри, специализирани във видео съдържание. Ако приемем, че вече сте качили видеоклипа си, сега ще ви трябва вграждане на връзка. За YouTube това се открива чрез натискане на бутона „споделяне“ на страницата на видеоклипа и след това щракване върху „вграждане“. За Vimeo по същия начин ще щракнете върху „share“ и след това копирате вградената връзка, показана в изскачащия прозорец.

БЪРЗ СЪВЕТ: Когато използват бутона „споделяне“, YouTube и Vimeo ще предоставят опции за настройки като автоматична игра, цикъл и показване / скриване на контролите на плейъра. Уверете се, че не ги пропускате, за да коригирате лесно начина, по който се показва вашето видео. Vimeo също може да изисква допълнителни настройки за да работи правилно като фоново видео.

Може да забележите, че тези вградени връзки се съдържат в вградена рамка етикет, който се държи малко по-различно от нашия HTML5 елемент. За да работят тези видеоклипове като фонове на цял екран, ще трябва да направим малка настройка с нашата маркировка. Благодарение на метод от Ришаб Агарвал, има просто решение за това:

HTML

Изберете код

CSS

.videoContainer {
позиция: абсолютна;
ширина: 100%;
височина: 100%;
отгоре: 0;
вляво: 0;
дъно: 0;
вдясно: 0;
дисплей: гъвкав;
гъвкава посока: колона;
обосновка-съдържание: център;
подравняване-елементи: център;
}
#hero {
позиция: относителна;
}
iframe {
/ * по избор * /
ширина: 100%;
височина: 100%;
} Изберете код

Качването ви в YouTube или Vimeo сега трябва да се държи като функционално фоново видео зад съдържанието на вашия герой.

Използване на WordPress

Ако използвате WordPress, има а разнообразие от видео приставки които могат да изпълнят горната задача, без да се притесняват от код. Повечето от тях обаче са премиум приставки, които може да се наложи да закупите.

Съвети и най-добри практики за вграждане на видеоклипове

Сега, когато видеоклипът ви е успешно задействан и действаме, нека разгледаме малко по-подробно тънкостите на оптимизацията, размера на файла и осигуряването на вашето фоново видео за герой да изглежда и работи най-добре.

Разбиране на типа на файла

Преди съм казвал, че има много опции за наличните типове видео файлове, като някои от най-популярните са mp4, OGG, и WebM. Съвременните браузъри почти универсално приемат mp4 като преобладаващ формат, така че най-малкото това е типът файл, който ще трябва да включите. Обикновено обаче е добра идея да се гарантира, че всички потребители получават подобно изживяване, дори и да са в остарял софтуер; в този случай вашата маркировка ще изглежда подобна на тази:

Изберете код

БЪРЗ СЪВЕТ: Поставете предпочитания от вас формат на файла последен в списъка с източници. Това е, което браузърът ще прочете последно и, ако устройството на потребителя го поддържа, ще бъде този, който ще се зареди.

Друга техничност, която трябва да се вземе предвид е какво видео кодек да използвате, което е основно как файлът се компресира и след това интерпретира от медийния плейър на браузъра. Основният кодек, с който трябва да се занимавате, е H.264, кое е, което повечето браузъри приемат и какви сайтове като YouTube и Vimeo поддържат.

Ако всичко това ви звучи като объркващ жаргон, не се притеснявайте. Вероятно е видеоклипът ви вече да е в желаното МР4 / H.264 формат. Това обикновено е типът файл, който ви се дава при изтегляне от сайт за видеоклипове. Ако трябва да конвертирате различен тип файл в mp4, тогава ще ви трябва допълнителен софтуер. Adobe Premiere Pro е индустриалният стандарт за работа с видеоклипове, но това разбираемо надхвърля средствата на повечето хора. За щастие има безплатна програма за PC и Mac, наречена HandBrake това трябва да постигне точно това, от което се нуждаете.

Пример за герой фоново видео с аудиоХрам Самукава-джинджа създава красиво и успокояващо изживяване с видео (и аудио – но ще видите защо в този случай е приемливо). Обърнете внимание на умелата интеграция на видеото с тяхното навигационно меню.

Оптимизиране на вашия видео файл

Вероятно не е добра идея да вземете видеото си, тъй като в момента стои и да го качите направо на вашия уебсайт. Видео файловете могат да бъдат големи – дори 30 секундни клипове, ако са с висока или ултра дефиниция. Не забравяйте, че вашите потребители трябва да изтеглят тези файлове в браузъра си, преди да играят, а чакането на 50 мегабайтово видео да се зареди не е благоприятно за доброто потребителско изживяване.

Ще трябва да ощипнете видеоклиповете си резолюция, битрейт, и дължина за да се оптимизира оптимален размер на файла. Вижте това удобно ръководство за бърз старт за това как да подготвите видеоклипове за мрежата.

И така, колко голям е твърде голям? Като цяло се счита това 5 мегабайта е максималният размер за фонов видеоклип, с размери на файловете по-малко от 1 мегабайт като идеал. Това може да бъде доста сложно да се постигне, за да се постигне баланс между качество и размер. За начало дръжте резолюцията си наблизо 720p или по-малко за добра комбинация от яснота и икономичност. Рязкото 4K видео може да изглежда прекрасно, но имайте предвид, че повечето хора сърфират в мрежата на екрани под 15 ″, така че добавената резолюция ще бъде просто излишна.

По отношение на дължината идеалното време за изпълнение би било някъде между тях 10-30 секунди. Ако е твърде кратък, видеоклипът ви може да се чувства тривиален или, ако е цикличен, твърде повтарящ се. Прекалено дълго видео може да загуби вниманието на потребителите и да увеличи размера на файла.

Скоростта на бита оказва значително влияние върху размера на файла и вероятно е това, което ще прекарате по-голямата част от усилията си в настройване. Намирането на идеалния номер за вашето видео е процес, който е извън обхвата на тази статия, но YouTube и Vimeo предоставят насоки за оптимизиране на файлове тук и тук съответно това трябва да ви помогне да се насочите в правилната посока.

Премахване на аудиото

Както беше предложено по-рано, заглушаването на фоновото ви видео е предпочитаната практика на UX. Ако наистина няма причина звукът да се възпроизвежда, всъщност можете да отидете по-далеч от заглушаване на видеото и да премахнете аудио записа напълно от файла. Това ще намали значително размера на файла, като се отървете от ненужните данни. Това означава по-малка честотна лента на вашия сървър и по-бързо зареждане за вашите потребители. HandBrake е добра опция за лесно премахване на аудио записи от файлове.

Автоматична игра и мобилни устройства

Споменах, че има малко предупреждение с използването на настройката за автоматично игра за мобилни потребители. Като предпазна мярка, за да се предотврати нежеланото използване на данни, много мобилни телефони ще откажат да възпроизвеждат видеоклипове в мрежата. Това означава, че бутон Play ще бъде вграден като наслагване върху фоновото ви видео. Въпреки че това е малка неприятност, истинското раздразнение е, че това наслагване потенциално може да обхване всички връзки или съдържание, които сте поставили в секцията си с герои. Doh!

Изглежда, че най-новите версии на iOS сега поддържат функцията за автоматично игра, но много телефони на Android и други мобилни операционни системи все още са забелязани. Въпреки че сложните решения на JavaScript и хакове в браузъра могат да разрешат този проблем, тяхната надеждност е непоследователна и не се препоръчва напълно. Най-доброто решение за най-последователно потребителско изживяване може би е използването на медийна заявка за премахване на видеото изцяло от мобилни устройства и замяната му с изображението на вашия заместител. За целта поставете това във вашия CSS файл:

@media екран и (максимална ширина на устройството: 768px) {
#hero {
фон: url (placeholder.jpg) без повторение;
размер на фона: капак;
}
#bgvideo {
дисплей: няма;
}
} Изберете код

Контрастен текст & Видео

За най-добро визуално изживяване искате да се уверите, че текстът ви е четлив и се откроява от видеото зад него. Използването на лек текст за по-тъмно видео или тъмен текст за по-светъл видеоклип ще гарантира, че вашите потребители не пропускат важното съдържание или призовават за действие на секцията си герой.

Опитайте се да използвате видеоклипове, които следват определена цветова палитра – още по-добре, ако тези цветове съответстват на ръководството за стил на вашата марка. Фоновото видео с твърде много цветове може да изглежда не на място на вашия уебсайт или може да е твърде разсейващо от текста над него.

Ефективен метод за промяна на визуалния тон на вашето видео е да прилагате наслагвания и филтри. Това може да стане чрез редактиране на софтуер като Adobe Premiere или дори в съвременни браузъри чрез CSS филтър Имот. Опитайте да експериментирате с цветни наслагвания, наситеност, размазване и непрозрачност, за да коригирате естетично видеоклипа си, така че да съответства на стила на вашата марка и да не се разсейва от текста.

Пример за герой фон с ангажиране на редактиранеНай- Агенция FreshDesign използва ангажиращо редактиране, за да предаде същност и характер, който е интересен за гледане, без значение колко пъти се завърта. Цветният филтър също контрастира добре с текста и логото.

Къде да намерите видеоклипове за вашия фон

Вече сте готови да добавите ефективно и перфектно оптимизирано фоново видео към вашия уебсайт … освен, сега имате нужда от действителното видео! И така, къде ще вземете такъв?

Най-лесното и най-евтино решение е закупуването на видео съдържание от един от многото уебсайтове за кадри с кадри. iStock, Shutterstock, Разтворете, Coverr и дори Vimeo роялти безплатно са чудесен ресурс за придобиване на кадри с професионално качество.

БЪРЗ СЪВЕТ: Дума на внимание, когато разглеждате кадри с акции. Не го използвайте само за да го използвате. Един видеоклип трябва да добави към съобщението на вашия сайт и да спечели причината да съществува. Много видеоклипове с акции изглеждат прекалено общи и нежни, а тяхната натура с един размер не може да направи нищо за повишаване или разграничаване на уебсайта ви..

За най-добри резултати ще искате да наемете творческа агенция или видеограф на свободна практика, който да ви предостави персонализирани кадри, които наистина ще ангажират потребителите със същността на вашия продукт или марка. Бих предложил да направим търсене в Google за агенции или продуцентски компании около най-близкия ви столичен район и да разгледате техните портфейли. Вземете предложение и оценка на цената от няколко различни, за да претеглите вашите възможности. Това обаче ще бъде най-скъпият вариант и може да струва хиляди само за един видео фон.

Безплатни сайтове като Upwork или Fiverr може да е по-благоприятен за бюджета, но това е малко глупост за това какви производствени стойности или отговорност предоставят.

заключение

Всички обичат добро видео. Ние като че ли сме гадни за тях – поглъщаме ги по нашите телевизори, компютри, телефони, таблети, на бюрата си, на кушетките, в колите си, навсякъде и навсякъде, където можем да ги гледаме..

Говори се, че 95% от информацията в мрежата е писмен език. Въпреки това, с настоящите прогнози и тенденции такива, каквито са, опитът ни за сърфиране в Интернет скоро може да бъде обвързан до голяма степен с видео. Това има смисъл, като се има предвид колко по-ефективни видеоклипове са вдъхновяващи действия от думи.

Въпреки че не всеки бизнес или уебсайт се нуждае от фоново видео, за да предаде своята марка, има голяма вероятност някой да помогне на вашия. Сега, след като знаете как да вградите такъв на вашия уебсайт, насърчавам ви да видите колко далеч фоновото видео с герои ще отведе бизнеса ви.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map