Kako ugraditi pozadinski videozapis heroja na svoju početnu stranicu

Saznajte kako koristiti video pozadinu u odjeljku heroja na vašoj web lokaciji & zašto može uvelike povećati stope pretvorbe za vaše poslovanje.


Kako ugraditi video pozadinu heroja

Nije tajna da su videozapisi nevjerojatno učinkoviti u promicanju angažmana publike na webu. Ljudi reagiraju i sjećaju se vizualne slike zapanjujuće većom brzinom nego kad se iste informacije prezentiraju riječima. Naš mozak jednostavno obrađuje slike brže – a da ne spominjemo kako je gledanje videa zabavno, uzbudljivo i – iskreno, zarazno. Publika dijeli nezasitnu glad za konzumiranjem video sadržaja, zbog čega se predviđa da u roku od dvije godine 80% cjelokupnog web prometa bit će vezani za video!

Moderni web dizajn vidi snažan poticaj prema zamjeni nepokretnih slika dinamičnijim vizualnim prikazima.

Kliknite za Tweet

Nisu samo riječi koje doživljavaju veliku čistku. Moderni web dizajn vidi snažan poticaj prema zamjeni nepokretnih slika dinamičnijim vizualnim prikazima. Prošli su dani kada su statične web stranice teksta i fotografija bile dovoljne da zadovolje korisnikov angažman. Videozapis je tamo na kojem se nalazi – a sada je vrijeme da se zapitate možete li njegova odsutnost na vašoj web stranici i dalje zanemariti.

Možda je glavni razlog što još uvijek prihvaćate format zbog njegovih uočenih tehničkih složenosti. Iako su potrebne dodatne pripreme i optimizacija za postavljanje videozapisa na vašu web stranicu, proces je u posljednjih nekoliko godina dovoljno olakšan s različitim dodacima i HTML5.

Za pomoć u razumijevanju kako ugraditi videozapise na svoju web stranicu, ovaj je vodič ovdje kako bi vam pokazao što trebate znati kako biste stvorili uvjerljiv vizualni doživljaj koji korisnici uskoro neće zaboraviti.

Pozadinski videozapis “Hero”

Kada govorimo o ugrađivanju videozapisa na vašu web stranicu, ne govorimo samo o bilo kojoj vrsti videozapisa smještenoj na bilo koje slučajno mjesto. Ovaj se članak posebno bavi korištenjem popularnog i učinkovitog trenda u web dizajnu zvanom the herojski pozadinski video.

Evo primjera:

Primjer pokreta i avanture video pozadina može oživjetiEvo dobrog primjera korištenja videozapisa u pozadini heroja. Kao što vidite, video pruža osjećaj pokreta i avanture za to trgovina biciklima koje fotografije još uvijek nisu mogle postići.

Prethodno smo spomenuli koncept korištenja slika heroja u odjeljku “iznad nabora“Područje vaše web stranice. Za neupućene, slika heroja (ili ponekad koja se naziva baner) često je prvo što ljudi vide kada dođu na vašu web lokaciju, gdje je njen najvažniji sadržaj predstavljen na sažet i vizualno upečatljiv način. Ovaj primarni odjeljak obično ispunjava širinu i visinu cijelog zaslona glatkom pozadinskom slikom, ostavljajući puno otvorenog prostora oko kritičnog gumba ili veze poziva na akciju.

Isti koncept vrijedi ovdje, osim očigledno da pozadinsku sliku zamjenjujemo video. To se u početku može činiti kao relativno beznačajna promjena: U redu, nekad smo imali fotografiju osobe koja se vozi biciklom, ali sada imamo videozapis bicikla u akciji i kako se vozi u vožnji – velika guza, zar ne?

Gledanje jednostavnog trenutka u pokretu može stvoriti ogroman utjecaj na način na koji će korisnici percipirati i angažirati se s vašom markom.

Kliknite za Tweet

Pa, ispada da gledanje jednostavnog trenutka u pokretu može stvoriti ogroman utjecaj na to kako će korisnici percipirati i angažirati se s vašom markom. Videozapisi nadahnjuju emocije i djelovanje brže od bilo kojeg drugog medija. Ako vam je konverzija vaš glavni cilj, tada bi tajni umak mogao biti tajni umak na uspješnoj web stranici.

Zašto koristiti pozadinski video?

Mnogo je dokaza koji ilustriraju koliko moćni videozapisi mogu biti za tvrtku. Evo nekoliko opipljivih statistika dijeli Forbes koji bi trebao poslužiti kao motivacija:

  • Umetanje pozadinskog videozapisa heroja na vašu odredišnu stranicu može povećati stopu konverzije za 80%
  • Videozapisi o proizvodima pomažu utjecati na 90% kupaca prilikom donošenja odluke o kupnji
  • 64% kupaca ima veću vjerojatnost da će kupiti proizvod na mreži nakon gledanja videa o njemu.
  • Stručnjak za digitalni marketing James McQuivey to procjenjuje jedna minuta video sadržaja vrijedi 1,8 milijuna riječi.

Primjer videozapisa u pozadini herojaDa li biste radije vidjeli taj Nacionalni parkovi, ili biste radije iskustvo ih?

Dakle, sada kada smo utvrdili zašto je video sadržaj toliko važan, da konačno razmotrimo kako pronaći ove proklete stvari na vašoj web stranici!

Ugradnja pozadinskih videozapisa na vašu web lokaciju

Istina je da možete odabrati mnogo formata datoteka, različite razine podrške preglednika i različite metode za ugradnju videozapisa na web stranicu – ali to ću pojednostaviti koliko god je moguće i reći ću vam samo najrelevantnije informacije , korak po korak, kako bi se postigla maksimalna kompatibilnost za sve moguće korisnike.

Samoposluživanje vašeg videozapisa vs. Upotreba usluge hostinga

Prvo što ćete trebati odrediti je gdje će video datoteke zapravo boraviti: na vlastitom poslužitelju vaše web stranice (drugim riječima, vašem web hosting računu) ili na platformi za video hosting poput YouTubea ili Vimeo.

Neki prednosti videozapisa s vlastitim hostingom uključuju veću slobodu u načinu ugrađivanja, lakšu implementaciju u izradi videozapisa na cijelom zaslonu i veću kontrolu zaštite videozapisa iza portala za unovčavanje (za to će biti potrebno angažiranje kvalificiranog back-end programera).

Neki prednosti video platformi uključuju malo lakše ugradnju, upotrebu brzih poslužitelja svjetske klase (koji olakšava propusnost na vašem vlastitom poslužitelju) optimiziranih posebno za video datoteke i širu sposobnost dijeljenja.

Obično bih za videozapise opće namjene na web mjestu preporučio jednostavnost korištenja video platforme za posluživanje vašeg sadržaja, posebno ako je vaša web lokacija na zajedničkom planu hostinga. Međutim, specifičnosti videozapisa u pozadini zahtijevaju određene postavke koje su bolje za samostalno hosting. Možda imate svoje razloge za korištenje bilo koje metode, pa ću vam pružiti upute za obje.

1. metoda: Samoposluživanje

Prvo, video mora postojati na vašem poslužitelju. Raspravljat ćemo o vrsti video datoteke koja vam je potrebna malo, ali zasad, baš kao i dodavanje slika, morat ćete upotrijebiti FTP program za prijenos video datoteke na vaš poslužitelj.

Sada ćemo umetnuti ispravan kôd u vašu web stranicu kako bismo poslužili čari. HTML5 dopušta upotrebu oznaku koja s zahvalnošću zamjenjuje Flash kao preferirani web format za videozapise. Evo što trebamo za stvaranje odgovarajućeg pozadinskog videozapisa na cijelom zaslonu:

HTML

Odaberite kôd

CSS

video # bgvideo {
položaj: fiksiran;
vrh: 50%;
lijevo: 50%;
minimalna širina: 100%;
minimalna visina: 100%;
širina: auto;
visina: auto;
z-indeks: -100;
-ms-transformacija: prevestiX (-50%) prevestiY (-50%);
-transformacija mozga: prevestiX (-50%) prevestiY (-50%);
-webkit-transformacija: prevestiX (-50%) prevestiY (-50%);
transformirati: prevestiX (-50%) prevestiY (-50%);
pozadina: url (placeholder.jpg) ne-ponavljanje;
pozadina: poklopac;
} Odaberite kôd

Ovdje se događa prilično malo, pa pogledajmo što znače ove postavke.

playsinline

To zadržava videozapis u pregledniku i pored vašeg sadržaja, što je važno kako bi se spriječilo da u cijelosti bude prikazan na cijelom zaslonu gdje je cijeli vaš zaslon zauzet video i ništa drugo.

auto Play

Najvjerojatnije želite da se pozadinski videozapis heroja reproducira odmah nakon što se stranica učita, bez potrebe za pritiskom na gumb “reproduciraj”. Ipak postoji nekoliko problema s tim za mobilne korisnike, o kojima ću kasnije govoriti.

prigušen

Ako vaš videozapis ne sadrži bitne podatke u audio zapisu, najbolje je isključiti pozadinski videozapis. Ljudi imaju izrazito gnušanje zbog dočeka s neočekivanim zvukom dok surfate webom, tako da je bolje isključiti zvuk nego isključiti svoje korisnike.

petlja

Izbor za reprodukciju vašeg videa treba donositi ovisno o slučaju. Ako želite osjećaj konačnosti kada se video završava jasnim pozivom na akciju bez ometanja, onda bi bilo smisla ovu postavku izostaviti.

poster

Nabava slikovne datoteke ovdje djeluje kao rezervirano mjesto dok se video ne završi s učitavanjem i reprodukcijom. Na vašoj je diskreciji što bi bilo najprikladnije za prikaz, bilo da je riječ o fotografiji iz prvog okvira ili nešto poput logotipa ili natpisa.

Naše CSS postavke u osnovi upućuju preglednik da protegne videozapis na cijeloj stranici. Ovdje valja napomenuti pozadina postavka koristeći našu istu poster slika; ovo djeluje kao vizualna povratna pogreška u slučaju da starinski preglednik ne prepozna svojstvo.

Ako namjeravate prikazati tekst ili gumb poziva na akciju preko pozadinskog videa, možete ih dodati kao i obično unutar div.

Druga metoda: YouTube ili Vimeo

Pomoću ove metode video datoteke će se isključiti s vašeg web mjesta, gdje umjesto toga žive na namjenskim poslužiteljima koji su specijalizirani za video sadržaj. Pod pretpostavkom da ste već prenijeli svoj videozapis, sada će vam trebati ugradi vezu. Za YouTube ovo se otkriva pritiskom na gumb “dijeli” na stranici videozapisa, a zatim kliknite na “ugradi”. Za Vimeo ćete na sličan način kliknuti „share“, a zatim kopirati ugrađenu vezu prikazanu na skočnom prozoru.

BRZI SAVJET: Kada koristite gumb “dijeli”, YouTube i Vimeo također će pružiti opcije za postavke poput automatske reprodukcije, petlje i prikazivanja / skrivanja kontrola igrača. Obavezno ne propustite ove kako biste lako prilagodili način prikazivanja vašeg videozapisa. Vimeo također može zahtijevati dodatne postavke radi ispravnog rada kao pozadinski video.

Možda ćete primijetiti da su ove ugrađene veze sadržane u iframe koja se ponaša malo drugačije od našeg HTML5 elementa. Da bi ovi videozapisi mogli funkcionirati kao pozadine preko cijelog zaslona, ​​potrebno je malo prilagoditi našu oznaku. Zahvaljujući metodi od Rishabh Aggarwal, Postoji jednostavno rješenje za to:

HTML

Odaberite kôd

CSS

.videoContainer {
položaj: apsolutni;
širina: 100%;
visina: 100%;
vrh: 0;
lijevo: 0;
dno: 0;
desno: 0;
prikaz: fleksibilnost;
fleks-smjer: stupac;
opravdati-sadržaj: centar;
poravnati predmeti: središte;
}
#hero {
položaj: relativan;
}
iframe {
/ * izborno * /
širina: 100%;
visina: 100%;
} Odaberite kôd

Vaš prijenos na YouTube ili Vimeo trebao bi se sada ponašati kao funkcionalni pozadinski video iza vašeg herojskog sadržaja.

Korištenje WordPressa

Ako koristite WordPress, postoji a raznolikost video dodataka koja može obaviti gornji zadatak bez brige o kodu. Međutim, većina je to premium dodataka koje ćete možda morati kupiti.

Savjeti i najbolja praksa za ugradnju videozapisa

Sada kada je vaš videozapis uspješno u akciji, istražite malo detaljnosti optimizacije, veličine datoteke i osigurajte da vaš pozadinski video izgleda najbolje i djeluje u najboljem redu..

Razumijevanje vrste datoteke

Prije sam rekao da su na raspolaganju brojne opcije video vrsta, od kojih su neke najpopularnije mp4, OGG, i WebM. Moderni preglednici gotovo univerzalno prihvaćaju mp4 kao prevladavajući oblik, tako da je u najmanju ruku ovo vrsta datoteke koju ćete trebati uključiti. Međutim, obično je dobra ideja osigurati da svi korisnici dobiju slično iskustvo, čak i ako imaju zastarjeli softver; u tom slučaju će vaša oznaka izgledati slično:

Odaberite kôd

BRZI SAVJET: Umetnite željeni format datoteke zadnji u popis izvora. To će preglednik pročitati zadnji, a ako ga uređaj korisnika podržava, učitavat će se.

Još jedna tehnička stvar koju treba uzeti u obzir jest što video kodek koristiti, što je u osnovi način na koji se datoteka komprimira i interpretira medijskim uređajem preglednika. Glavni kodek koji bi trebao biti zabrinut jest H.264, što prihvaća većina preglednika i koje web stranice poput YouTubea i Vimeo podržavaju.

Ako sve to zvuči kao zbunjujući žargon, ne brinite. Vjerojatno je da je vaš videozapis već u željenoj MP4 / H.264 format. To je obično vrsta datoteke koja vam se daje prilikom preuzimanja s web mjesta s video dionicama. Ako trebate pretvoriti drugu vrstu datoteke u mp4, za to vam je potreban dodatni softver. Adobe Premiere Pro industrijski je standard za rad s videozapisima, ali to je razumljivo iznad načina većine ljudi. Srećom postoji besplatni program za PC i Mac koji se zove Ručna kočnica to bi trebalo ostvariti upravo ono što vam treba.

Primjer videozapisa u pozadini heroja sa zvukomSvetište Samukawa-jinja stvara prekrasno i umirujuće iskustvo s videozapisima (i zvukom – ali vidjet ćete zašto je u ovom slučaju to prihvatljivo). Zapamtite pametnu integraciju videozapisa s njihovim navigacijskim izbornikom.

Optimiziranje vaše video datoteke

Vjerojatno nije dobra ideja snimiti vaš videozapis kakav trenutno stoji i prenijeti ravno na vaše web mjesto. Video datoteke mogu biti velike – čak 30 sekundnih isječaka ako su u visokoj ili ultra definiciji. Zapamtite da vaši korisnici moraju preuzeti te datoteke na svoj preglednik prije reprodukcije, a čekanje da se učita videozapis od 50 megabajta ne pogoduje sjajnom korisničkom iskustvu.

Morat ćete prilagoditi videozapise rezolucija, brzina bita, i dužina kako bi se prilagodila optimalna veličina datoteke. Pogledajte ovo prikladno vodič za brzi postupak pripreme videozapisa na webu.

Pa koliko je prevelika? To se općenito smatra 5 megabajta je maksimalna veličina za pozadinski video, s veličinama datoteka manje od 1 megabajta biti ideal. To se može učiniti prilično škakljivim kako bi se postigla ravnoteža između kvalitete i veličine. Za početak, držite svoju razlučivost oko 720p ili manje za dobar spoj jasnoće i ekonomičnosti. Oštar 4K videozapis može izgledati prekrasno, ali imajte na umu da većina ljudi pregledava web na ekranima manjim od 15 ″, tako da bi dodana rezolucija bila samo suvišna.

U pogledu duljine, idealno vrijeme izvođenja bi bilo negdje između 10–30 sekundi. Ako je prekratak, vaš se videozapis može osjećati trivijalno ili, ako je petlja, previše ponavljajući. Predugo trašeni videozapis riskira gubitak pažnje korisnika i povećanje veličine datoteke.

Brzina prijenosa značajno utječe na veličinu datoteke i na to je vjerojatno ono što ćete potrošiti većinu svojih napora. Pronalaženje idealnog broja za vaš videozapis postupak je izvan okvira ovog članka, ali YouTube i Vimeo daju smjernice za optimizaciju datoteka ovdje i ovdje odnosno to bi vam trebalo pomoći da usmjerite u pravom smjeru.

Uklanjanje zvuka

Kao što je ranije predloženo, preferirana UX praksa je isključivanje pozadinskog videozapisa. Ako zaista nema razloga za reprodukciju zvuka, možete ići dalje od isključivanja zvuka i potpuno ukloniti audio zapis iz datoteke. To će uvelike smanjiti veličinu datoteke uklanjanjem nepotrebnih podataka. To znači manje propusnosti na vašem poslužitelju i brže učitavanje za vaše korisnike. Ručna kočnica je dobra opcija za lako uklanjanje audio zapisa iz datoteka.

Automatska igra i mobilni uređaji

Spomenuo sam da postoji mali upozorenje s korištenjem postavke automatskog igranja za mobilne korisnike. Kao sigurnosna mjera kako bi se spriječilo neželjeno korištenje podataka, mnogi mobilni telefoni odbijaju automatsko reprodukciju videozapisa na webu. To znači da će gumb Play igrati biti ugrađen kao sloj na vrhu vašeg pozadinskog videozapisa. Iako je ovo mala smetnja, prava iritacija je što ovaj sloj potencijalno može pokriti sve veze ili sadržaje koje ste postavili u odjeljak heroja. Doh!

Čini se da najnovije verzije iOS-a sada podržavaju značajku automatskog igranja, ali mnogi Android telefoni i drugi mobilni operativni sustavi i dalje su uočeni. Iako složeni JavaSkripovi i hakerski preglednici mogu riješiti ovaj problem, njihova pouzdanost nije konzistentna i ne preporučuje se u potpunosti. Najbolje rješenje za najkonkurentnije korisničko iskustvo možda je korištenje medijskog upita za uklanjanje videozapisa u cijelosti s mobilnih uređaja i zamjena istog sa slikom rezerviranog mjesta. Da biste to učinili, stavite to u svoju CSS datoteku:

@media zaslon i (maks. širina uređaja: 768px) {
#hero {
pozadina: url (placeholder.jpg) ne-ponavljanje;
pozadina: poklopac;
}
#bgvideo {
prikaz: nijedan;
}
} Odaberite kôd

Tekst kontrasta & Video

Da biste postigli najbolji vizualni doživljaj, želite biti sigurni da je vaš tekst čitljiv i da stoji iza videa iza njega. Korištenje svijetlog teksta na tamnijem videozapisu ili tamnog teksta na svjetlijem videozapisu osiguraće da vaši korisnici ne propuste važni sadržaj ili pozivaju na radnju svog odjeljka heroja.

Pokušajte koristiti videozapise koji slijede određenu paletu boja – još bolje ako se boje podudaraju sa stilskim vodičem vaše marke. Pozadinski videozapis s previše boja može izgledati nepristojno na vašoj web lokaciji ili može previše odvratiti pozornost od teksta iznad njega.

Učinkovita metoda za promjenu vizualnog tona vašeg videa je primjena slojeva i filtera. To se može postići uređivanjem softvera poput Adobe Premiere ili čak i na modernim preglednicima putem CSS-a filtar nekretnine. Pokušajte eksperimentirati s prekrivanjem boja, zasićenjem, zamagljenosti i neprozirnošću da biste precizno prilagodili estetiku svog videa tako da se podudara sa stilom vašeg branda i ne odvrati od teksta..

Primjer pozadine heroja sa zanimljivim uređivanjem FreshDesign agencija koristi angažirajuće uređivanje za prenošenje suštine i karaktera koje je zanimljivo gledati bez obzira koliko puta se petlja. Filter boja također je u kontrastu s tekstom i logotipom.

Gdje pronaći videozapise za svoju pozadinu

Sada ste spremni dodati učinkovit i savršeno optimiziran pozadinski video na svoju web stranicu … osim, sada vam je potreban stvarni video! Pa otkud ti jedan?

Najjednostavnije i najmanje skupo rješenje je kupnja video sadržaja s jedne od mnogih web stranica s snimanjima dionica. Istockphoto, Shutterstock, Otopiti, Coverr pa čak Vimeo besplatno su sjajna sredstva za stjecanje profesionalnih snimaka.

BRZI SAVJET: Riječ opreza prilikom pregledavanja snimki sa dionicama. Ne upotrebljavajte ga samo radi toga. Videozapis mora dodati poruku vaše web lokacije i zaslužiti razlog postojanja. Mnogi videozapisi s dionicama izgledaju pretjerano općenito i skladno, a njihova jedinstvena veličina ne može učiniti ništa za podizanje ili razlikovanje vaše web stranice..

Za najbolje rezultate, želite angažirati kreativnu agenciju ili samostalnog videografa koji će vam pružiti prilagođene snimke koji će zaista korisnike privući suštinom vašeg proizvoda ili marke. Preporučio bih da Google pretražuje agencije ili produkcijske tvrtke oko vašeg najbližeg gradskog područja i pogledate njihove portfelje. Nabavite prijedlog i procjenu cijene za nekoliko različitih kako biste odmjerili svoje mogućnosti. Ovo će, međutim, biti najskuplja opcija i može koštati tisuće samo za jednu video pozadinu.

Web-lokacije za freelancing poput oDesk ili je Fiverr možda povoljniji proračun, ali pomalo je sranje o tome koje proizvodne vrijednosti ili obveze pružaju.

Zaključak

Svi vole dobar video. Čini se da smo dojilje za njih – bespomoćno ih konzumiramo na televizorima, računalima, telefonima, tabletima, za stolovima, na kaučima, u automobilima, svugdje i bilo gdje da ih možemo gledati.

Govorilo se da je 95% informacija na webu pisano jezikom. Međutim, s trenutnim projekcijama i trendovima kakav jesu, naše će iskustvo pregledavanja interneta uskoro biti uvelike povezano s videozapisom. Ovo ima smisla, s obzirom na to koliko su mnogo učinkovitiji videozapisi nadahnjujući od riječi.

Iako nijednoj tvrtki ili web mjestu potreban pozadinski videozapis za prenošenje njegove robne marke, postoji velika vjerojatnost da će jedan pomoći vašem. Sada kada znate kako ugraditi jedan na svoju web stranicu, potičem vas da vidite koliko će pozadinski videozapis heroja odvesti vašu tvrtku.

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