Kuidas manustada oma kodulehele kangelase taustavideot

Siit saate teada, kuidas oma saidi kangelaste jaotises videotausta kasutada & miks see võib teie ettevõtte konversioonimäärasid märkimisväärselt tõsta.


Kuidas manustada kangelase video tausta

Pole saladus, et videod on uskumatult tõhusad vaatajaskonna kaasamise edendamiseks veebis. Inimesed reageerivad visuaalidele ja mäletavad neid hämmastavalt kiiremini kui siis, kui sama teavet esitatakse sõnade kaudu. Meie ajud töötlevad pilte lihtsalt kiiremini – rääkimata sellest, et video vaatamine on lõbus, põnev ja – ausalt öeldes – ka sõltuvust tekitav. Vaatajaskond jagab videosisu tarbimise järele rahuldamatut nälga, mistõttu arvatakse, et see toimub kahe aasta jooksul 80% kogu veebiliiklusest seotakse videoga!

Kaasaegne veebidisain on tohutu tõuge piltide asendamiseks dünaamilisema visuaaliga.

Klõpsake Tweet

Suured puhastused pole ainult sõnad. Kaasaegne veebidisain on tohutu tõuge piltide asendamiseks dünaamilisema visuaaliga. Möödas on päevad, mil teksti ja fotode staatilised veebilehed olid kasutajate kaasamiseks piisavad. Video on seal, kus see asub – ja nüüd on aeg küsida endalt, kas selle puudumist teie veebisaidil võib jätkuvalt ignoreerida.

Võib-olla on peamine põhjus, miks olete formaati veel omaks võtnud, selle tajutava tehnilise keerukuse tõttu. Ehkki videote oma veebisaidile jõudmiseks võib vaja minna veel täiendavaid ettevalmistusi ja optimeerimisi, on see protsess mitmesuguste pistikprogrammide ja HTML5 abil viimastel aastatel piisavalt lihtsustatud..

Abi saamiseks videote oma veebisaidile manustamise mõistmisel on see juhend siin, et näidata teile, mida peate teadma, et luua köitev visuaalne kogemus, mida kasutajad ei unusta peagi.

“Kangelase” taustavideo

Kui me räägime teie veebisaidile videote manustamisest, siis ei räägi me lihtsalt mis tahes tüüpi videost, mis on paigutatud suvalisse kohta. See artikkel on spetsiaalselt populaarse ja efektiivse veebidisaini suundumuse, mida nimetatakse kangelase taustavideo.

Siin on näide:

Näide liikumisest ja seiklusest, mida video taust võib saavutadaSiin on hea näide kangelase taustavideo kasutamisest. Nagu näete, pakub video selle jaoks liikumismeelt ja seiklust jalgrattapood et fotosid lihtsalt ei olnud võimalik saavutada.

Oleme varem maininud kangelaste piltide kasutamise kontseptsiooni jaotises „voldi kohal”Oma veebilehel. Tahtmatu jaoks on kangelaskujutis (või mõnikord ka ribareklaam) sageli esimene asi, mida inimesed teie saidile jõudes näevad, kus selle kõige olulisem sisu on esitatud kokkuvõtlikult ja visuaalselt silmatorkavalt. See esmane osa täidab tavaliselt kogu ekraani laiuse ja kõrguse klanitud taustapildiga, jättes kriitilise tegevusele kutsumise nupu või lingi ümber palju ruumi.

Sama kontseptsioon kehtib ka siin, välja arvatud ilmselt nüüd, kui asendame taustpildi videoga. See võib alguses tunduda suhteliselt tähtsusetu muudatus: Olgu, nii et meil oli vanasti foto inimesest, kes sõitis jalgrattaga, kuid nüüd on meil video, kus jalgratas töötab ja sõidetakse – suur lutt, eks?

Lihtsa liikumishetke jälgimine võib avaldada tohutut mõju sellele, kuidas kasutajad teie kaubamärki tajuvad ja temaga suhelda saavad.

Klõpsake Tweet

Noh, selgub, et lihtsa liikumise hetke jälgimine võib avaldada tohutut mõju sellele, kuidas kasutajad teie kaubamärki tajuvad ja temaga suhelda saavad. Videod inspireerivad emotsioone ja tegutsemist kiiremini kui ükski teine ​​meedium. Kui teie peamine eesmärk on konversioon, siis eduka veebisaidi salajaseks kastmeks võib olla taustvideo.

Miks kasutada taustavideot??

On ülekaalukalt tõendeid, mis illustreerivad, kui võimsad videod võivad olla ettevõtte jaoks. Siin on mõni ahvatlev statistika jagab Forbes see peaks toimima motivatsioonina:

  • Kangelase taustavideo manustamine oma sihtlehele võib suurendada konversioonimäärasid 80%
  • Tootevideod aitavad ostuotsuse tegemisel mõjutada 90% klientidest
  • 64% klientidest ostavad suurema tõenäosusega toote veebist pärast seda käsitleva video vaatamist.
  • Digiturunduse eksperdi James McQuivey hinnangul üheminutiline videosisu on 1,8 miljonit sõna väärt.

Kangelase taustavideo näideKas eelistaksite näha? Rahvuspargid, või tahaksite pigem kogemus neid?

Nüüd, kui oleme välja selgitanud, miks videosisu on nii oluline, vaatame lõpuks, kuidas need neetud asjad oma veebisaidile üles tõsta!

Taustavideote manustamine oma veebisaidile

Tõsi on see, et valida on paljude failivormingute vahel, brauseri toe eri tasemed ja videote veebisaidile manustamise erinevad meetodid – kuid kavatsen seda võimalikult palju lihtsustada ja ütlen teile ainult kõige olulisemat teavet. , samm-sammult, et saavutada maksimaalne ühilduvus kõigi võimalike kasutajate jaoks.

Teie video iseseisev majutamine Majutusteenuse kasutamine

Esimene asi, mida peate kindlaks tegema, on see, kus videofailid tegelikult asuvad: teie veebisaidi enda serveris (teisisõnu teie enda veebimajutuskontol) või videote hostimise platvormil, nagu YouTube või Vimeo.

Mõni isemajandava video eelised kaasake suurem manustamisvabadus, hõlpsam rakendamine video täisekraaniks muutmisel ja suurem kontroll video monetiseerimisportaali taga kaitsmisel (selleks oleks vaja palgata kvalifitseeritud taustaga arendaja).

Mõni videoplatvormide eelised hõlmavad veidi hõlpsamat manustamist, kiirete maailmatasemel serverite kasutamist (mis kergendab teie enda serveri ribalaiust), mis on optimeeritud spetsiaalselt videofailide jaoks, ja laialdasemat jagamisvõimet.

Tavaliselt soovitaksin veebisaidi üldotstarbeliste videote jaoks hõlpsalt kasutada oma sisu teenimiseks videoplatvormi, eriti kui teie sait on jagatud hostimisplaani alusel. Taustkangelase video eripärad nõuavad siiski teatud seadeid, mis võimaldavad paremini isemajandamist. Mõlemat meetodit võivad kasutada teie põhjused, seetõttu pakun juhiseid mõlemale.

1. meetod: isemajutamine

Esiteks peab video teie serveris olemas olema. Arutame natuke seda, millist videofaili vajate, kuid nüüd, nagu piltide lisamine, peate kasutama ka FTP-programm oma videofaili serverisse üleslaadimiseks.

Nüüd sisestame maagia teenimiseks teie veebisaidile õige koodi. HTML5 võimaldab selle kasutamist silt, mis asendab õnneks Flashi kui videote eelistatud veebivormingut. Täisekraanil kuvatava taustvideo loomiseks on vaja järgmist:

HTML

Valige kood

CSS

video # bgvideo {
positsioon: fikseeritud;
ülemine: 50%;
vasakult: 50%;
min-laius: 100%;
min-kõrgus: 100%;
laius: auto;
kõrgus: auto;
z-indeks: -100;
-ms-teisendus: translateX (-50%) translateY (-50%);
-moz-teisendus: translateX (-50%) translateY (-50%);
-veebikomplekti teisendus: translateX (-50%) translateY (-50%);
teisendus: translateX (-50%) translateY (-50%);
taust: url (kohahoidja.jpg) ei korda;
tausta suurus: kaas;
} Valige kood

Siin toimub üsna palju, nii et vaatame, mida need seaded tähendavad.

playsinline

See hoiab video brauseris ja teie sisu kõrval, mis on oluline, et see ei saaks tõeliselt täisekraanil minna, kui video võtab teie kogu ekraani ja mitte midagi muud.

automaatne esitamine

Tõenäoliselt soovite kangelase taustavideot kohe pärast lehe laadimist kohe esitada, ilma et oleks vaja vajutada nuppu “Esita”. Mobiilikasutajate jaoks on sellega siiski paar probleemi, millest räägin hiljem.

vaigistatud

Kui teie video ei sisalda helirajal olulist teavet, on kõige parem vaigistada taustvideo. Inimestel on äärmine veendumus, et neid ootavad veebis surfates ootamatu heli, nii et parem on heli välja lülitada kui oma kasutajad välja lülitada.

silmus

Video esitamise kordusvalik tuleks teha igal üksikjuhul eraldi. Kui soovite lõplikkuse tunnet, kus video lõppeb selge tegevuste üleskutsega, ilma et see segaks tähelepanu, siis oleks mõistlik jätta see seade välja.

plakat

Siin pildifaili lisamine toimib kohahoidjana, kuni video laadimine ja esitamine lõpeb. Teie otsustada, milline oleks kõige sobivam kuvada, olgu see alles video esimese kaadri moodi või midagi sellist nagu logo või riba.

Meie CSS seaded määravad brauserile põhimõtteliselt video sirvimise kogu lehe ulatuses. Märkimist väärib siin taust millega meie sama plakat pilt; see toimib visuaalse varuna juhul, kui vananenud brauser seda ei tunne vara.

Kui kavatsete taustvideo kohal kuvada teksti või tegevusele kutsumise nuppu, saate need tavapärases jaotises lisada div.

2. meetod: YouTube või Vimeo

Selle meetodi kasutamine hoiab videofailid eemal teie saidist, kus nad elavad selle asemel spetsiaalsel serveril, mis on spetsialiseerunud videosisu. Eeldades, et olete oma video juba üles laadinud, vajate nüüd seda manusta link. YouTube’i jaoks leitakse see, vajutades video lehel nuppu Jaga ja klõpsates seejärel manusta. Vimeo puhul klõpsate samamoodi „jaga” ja kopeerite hüpikaknas näidatud manustamislingi.

Kiire näpunäide: Nupu „jaga” kasutamisel pakuvad YouTube ja Vimeo ka sätteid, nagu automaatne esitamine, ring ja mängija juhtnuppude kuvamine / peitmine. Teie video kuvamise hõlpsaks kohandamiseks ärge unustage neid. Võib nõuda ka Vimeo täiendavad seaded et see toimiks korralikult taustavideona.

Võite märgata, et need manustatud lingid sisalduvad iframe silt, mis käitub veidi erinevalt meie HTML5 elemendist. Nende videote täisekraanitaustadena töötamiseks peame oma märgistusega pisut muutma. Tänu meetodile Rishabh Aggarwal, selle saavutamiseks on lihtne lahendus:

HTML

Valige kood

CSS

.videokonteiner {
positsioon: absoluutne;
laius: 100%;
kõrgus: 100%;
ülemine: 0;
vasakul: 0;
põhi: 0;
paremal: 0;
kuva: flex;
painde-suund: kolonn;
õigusta-sisu: kese;
joonda üksused: keskel;
}
#hero {
positsioon: sugulane;
}
iframe {
/ * valikuline * /
laius: 100%;
kõrgus: 100%;
} Valige kood

Teie YouTube’i või Vimeo üleslaadimine peaks nüüd käituma funktsionaalse taustvideona, mis on teie kangelase sisu taga.

WordPressi kasutamine

Kui kasutate WordPressi, on olemas järgmised mitmesuguseid video taustapistikprogramme mis suudab ülalnimetatud ülesande täita koodi muretsemata. Enamik neist on premium-pluginad, mida peate võib-olla ostma.

Videote manustamise näpunäited ja parimad tavad

Nüüd, kui teie video on edukalt üleval ja töötab, kaevame veel pisut optimeerimise keerukate külgede, faili suuruse ja kangelase taustavideo parima väljanägemise ja töötamise tagamiseks.

Failitüübi mõistmine

Olen juba varem öelnud, et videofailitüüpide hulgas on palju võimalusi, mõned neist on kõige populaarsemad mp4, ogg, ja webm. Tänapäevased brauserid aktsepteerivad seda peaaegu üldiselt mp4 kui valdav vorming, nii et vähemalt see on failitüüp, mille peate kaasama. Tavaliselt on siiski hea mõte tagada, et kõik kasutajad saavad sarnase kogemuse, isegi kui nad kasutavad vananenud tarkvara; sel juhul näeb teie märgistus välja järgmine:

Valige kood

Kiire näpunäide: Sisestage eelistatud failivorming viimati allikate loendisse. Seda loeb brauser viimati ja laadib selle juhul, kui kasutaja seade seda toetab.

Veel üks tehniline kaalutlus on see, mida video koodek kasutada, mis tähendab põhimõtteliselt seda, kuidas fail tihendatakse ja siis brauseri meediumipleieri poolt tõlgendatakse. Suurim koodek, millega peaksite muret tundma, on H.264, mida enamik brauseritest aktsepteerib ja mida toetavad sellised saidid nagu YouTube ja Vimeo.

Kui see kõik kõlab segase kõnepruugina, ärge muretsege. Võimalik, et teie video on juba soovitud mp4 / H.264 vormingus. See on tavaliselt failitüüp, mis antakse teile videolõigu saidilt alla laadimisel. Kui peate teisendama teistsuguse failitüübi MP4-ks, siis vajate selleks täiendavat tarkvara. Adobe Premiere Pro on videotega töötamise standard, kuid see ületab arusaadavalt enamiku inimeste võimalusi. Õnneks on PC ja Mac jaoks olemas tasuta programm nimega Käepidur see peaks teostama just seda, mida vajate.

Kangelase taustavideo näide heligaSamukawa-jinja pühamu loob video (ja heli abil) kauni ja rahustava kogemuse, kuid näete, miks see sel juhul vastuvõetav on. Pange tähele video nutikat integreerimist nende navigeerimismenüüsse.

Videofaili optimeerimine

Tõenäoliselt pole hea mõte võtta oma praegusel kujul olev video üles ja otse oma veebisaidile üles laadida. Videofailid võivad olla suured – isegi 30-sekundilised klipid, kui need on kõrg- või kõrglahutusega. Pidage meeles, et kasutajad peavad need failid enne mängimist oma brauserisse alla laadima ja 50-megabaidise video laadimise ootamine ei soodusta suurepäraseid kasutajakogemusi.

Peate oma videot näpistama resolutsioon, bitikiirus, ja pikkus optimaalse failisuuruse lisamiseks. Vaadake seda käepärast giid videote veebi ettevalmistamiseks.

Niisiis, kui suur on liiga suur? Üldiselt arvatakse seda 5 megabaiti on taustvideo maksimaalne suurus koos failisuurustega vähem kui 1 megabait olles ideaal. Kvaliteedi ja suuruse vahelise tasakaalu saavutamiseks võib see olla üsna keeruline. Alustuseks hoidke oma resolutsioon umbes 720p või vähem hea selguse ja ökonoomsuse jaoks. Terav 4K-video võib tunduda uhke, kuid pidage meeles, et enamik inimesi sirvib veebi ekraanidel alla 15 ″, nii et lisatud eraldusvõime oleks lihtsalt üleliigne.

Pikkuse osas oleks ideaalne käitusaeg kuskil vahel 10–30 sekundit. Kui see on liiga lühike, võib teie video tunduda triviaalne või kui see on silmuses, siis liiga korduv. Liiga pikk video võib kaotada kasutajate tähelepanu ja suurendada faili suurust.

Bitikiirus mõjutab märkimisväärselt faili suurust ja tõenäoliselt veedate selle suurema osa oma pingutustest näpistades. Video jaoks ideaalse arvu leidmine on protsess, mis jääb selle artikli raamest välja, kuid YouTube ja Vimeo pakuvad juhiseid faili optimeerimiseks siin ja siin vastavalt, mis peaks aitama teid õiges suunas suunata.

Heli eemaldamine

Nagu varem soovitatud, on taustavideo vaigistamine eelistatud UX-tava. Kui heli esitamiseks pole tõesti põhjust, võite tegelikult minna kaugemale kui video summutamine ja heliraja failist täielik eemaldamine. See vähendab ebavajalikest andmetest lahti faili suurust. See tähendab väiksemat ribalaiust serveris ja kiiremat laadimist teie kasutajatele. Käepidur on hea võimalus heliribade failidest hõlpsaks eemaldamiseks.

Automaatne esitus ja mobiilseadmed

Mainisin, et mobiilikasutajate automaatse esituse sätte kasutamisel oli väike hoiatus. Turvameetmena soovimatu andmekasutuse vältimiseks keelduvad paljud mobiiltelefonid veebis videote automaatse esitamise eest. See tähendab, et nupp Esita manustatakse teie video tagaküljele ülekattena. Kuigi see on väike ebameeldivus, on tegelik ärritus see, et see ülekate võib potentsiaalselt hõlmata linke või sisu, mille olete oma kangelasejaotisse pannud. Doh!

Näib, et iOS-i uusimad versioonid toetavad nüüd automaatse esituse funktsiooni, kuid paljud Androidi telefonid ja muud mobiilsed opsüsteemid on endiselt täpilised. Ehkki keerulised JavaScripti lahendused ja brauseri häkked võivad selle probleemi lahendada, on nende usaldusväärsus ebajärjekindel ja pole täielikult soovitatav. Parim lahendus kõige ühtlasema kasutajakogemuse jaoks on võib-olla meediumipäringu kasutamine, et eemaldada video täielikult mobiilseadmetest ja asendada see kohahoidja kujutisega. Selleks pange see oma CSS-faili:

@media ekraan ja (seadme maksimaalne laius: 768 pikslit) {
#hero {
taust: url (kohahoidja.jpg) ei korda;
tausta suurus: kaas;
}
#bgvideo {
kuva: puudub;
}
} Valige kood

Kontrasttekst & Video

Parima visuaalse kogemuse saamiseks veenduge, et teie tekst oleks loetav ja eristuks selle taga olevast videost. Heledama teksti kasutamisel tumedama video või tumeda teksti korral heledama video puhul veenduge, et kasutajad ei jätaks teie kangelasejaotuse olulist sisu ega kutset tegevusele vahele.

Proovige kasutada videoid, mis järgivad teatud värvipaletti – veelgi parem, kui need värvid vastavad teie kaubamärgi stiilijuhendile. Liiga paljude värvidega taustavideo võib teie veebisaidil kohatu välja paista või häirib selle kohal olevat teksti liiga palju.

Tõhus meetod video visuaalse tooni muutmiseks on ülekatete ja filtrite rakendamine. Seda saab teha tarkvara redigeerimise kaudu nagu Adobe Premiere või isegi tänapäevastes brauserites CSS-i kaudu filter vara. Proovige katsetada värvikihte, küllastust, hägust ja läbipaistmatust, et video esteetikat nii hästi häälestada, et see vastaks teie brändi stiilile ega tõmbaks tekstist tähelepanu.

Kangelase tausta näide kaasakiskuva redigeerimisega FreshDesign agentuur kasutab kaasakiskuvat redigeerimist olemuse ja tegelase edastamiseks, mida on huvitav vaadata, hoolimata sellest, mitu korda see silmus. Värvifilter vastandab kenasti ka teksti ja logoga.

Kust leida oma taustaga videoid

Olete nüüd valmis oma veebisaidile lisama tõhusa ja ideaalselt optimeeritud taustavideo … välja arvatud, nüüd vajate tegelikku videot! Kust sa selle saad?

Lihtsaim ja odavaim lahendus on osta videosisu ühest paljudest seal asuvatest videomaterjalide veebisaitidest. iStock, Shutterstock, Lahustage, Coverr ja isegi Vimeo tasuta on suurepärased ressursid kvaliteetsete materjalide saamiseks.

Kiire näpunäide: Videomaterjali sirvimisel tuleb olla ettevaatlik. Ärge kasutage seda ainult selle kasutamise huvides. Video peab teie saidi sõnumile lisama ja selle olemasolu põhjuse välja teenima. Paljud aktsiavideod näevad välja liiga üldised ja õrnad ning nende kõigile sobiv loomus ei pruugi teie veebisaidi tõstmiseks või eristamiseks midagi ette võtta..

Parimate tulemuste saamiseks võiksite palgata loomingulise agentuuri või vabakutselise videograafi, kes pakuks teile kohandatud materjali, mis köidab kasutajaid teie toote või kaubamärgi olemusega. Ma soovitaksin teha Google’i otsingu teie lähimas suurlinna piirkonnas asuvate agentuuride või tootmisettevõtete kohta ja uurida nende portfelle. Oma võimaluste kaalumiseks saate mõnelt erinevalt pakkumise ja hinnakalkulatsiooni. See on siiski kõige kallim variant ja võib maksta tuhandeid vaid ühe video taustal.

Vabakutseliste saitide nagu Üles või Fiverr võivad olla eelarvesõbralikumad, kuid see on natuke jama sellest, milliseid tootmisväärtusi või vastutust nad pakuvad.

Järeldus

Kõik armastavad head videot. Tundub, et oleme nende jaoks imikud – tarbime neid riukalikult televiisorites, arvutites, telefonides, tahvelarvutites, töölaua taga, diivanitel, autodes, kõikjal ja kõikjal, kus me neid vaadata saame..

On öeldud, et 95% veebis olevast teabest on kirjakeel. Praeguste prognooside ja suundumustega, nagu nad on, võib meie Interneti-sirvimise kogemus peagi siiski olla videotega seotud. See on mõistlik, arvestades, kui tohutult tõhusamad videod on inspireerivad kui sõnad.

Kuigi mitte iga ettevõte või veebisait ei vaja oma kaubamärgi edastamiseks taustavideot, on suur tõenäosus, et üks aitab teie oma. Nüüd, kui teate, kuidas seda oma veebisaidile manustada, julgustan teid nägema, kui kaugele kangelase taustavideo teie ettevõtte viib.

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