Ինչպես տեղադրել հերոսի ֆոնային տեսանյութը ձեր կայքում

Իմացեք, թե ինչպես օգտագործել վիդեո ֆոնը ձեր կայքի հերոսի բաժնում & ինչու դա կարող է մեծապես բարձրացնել փոխակերպման տեմպերը ձեր բիզնեսի համար.


Ինչպես տեղադրել հերոսի վիդեո ֆոն

Գաղտնիք չէ, որ տեսանյութերը աներևակայելի արդյունավետ են հանդիսատեսի ներգրավվածությունը ցանցում խթանելու գործում: Մարդիկ արձագանքում և հիշում են պատկերները ցնցող ավելի բարձր տեմպերով, քան այն դեպքում, երբ նույն տեղեկատվությունը ներկայացվում է բառերի միջոցով: Մեր ուղեղը պարզապես պատկերներն ավելի արագ է վերամշակում. Չխոսելու տեսանյութ դիտելու փորձի մասին `զվարճալի, հուզիչ և, անկեղծ ասած, թմրամոլ: Հանդիսատեսը կիսում է անբավարար քաղցը վիդեո բովանդակության սպառման համար, այդ իսկ պատճառով կանխատեսվում է, որ երկու տարվա ընթացքում Ամբողջ վեբ տրաֆիկի 80% -ը կապվելու է տեսանյութի հետ!

Ժամանակակից վեբ ձևավորումը հսկայական մղում է տեսնում `ավելի դինամիկ պատկերներով փոխարինելով լուսանկարները.

Կտտացրեք Tweet- ը

Դա պարզապես բառեր չեն, որոնք մեծ մաքրություն են ապրում: Ժամանակակից վեբ ձևավորումը հսկայական մղում է տեսնում `ավելի դինամիկ պատկերներով փոխարինելով լուսանկարները: Անցան այն օրերը, երբ տեքստի և լուսանկարների ստատիկ ինտերնետային էջերը բավարար էին օգտագործողի ներգրավվածությունը բավարարելու համար: Տեսանյութը հենց այնտեղ է, և այժմ ժամանակն է հարցնել ինքներդ ձեզ, արդյոք ձեր վեբ կայքում դրա բացակայությունը կարող է շարունակվել անտեսվել.

Թերևս հիմնական ձևը, որը դուք դեռ չեք ձևավորել ձևաչափը, պայմանավորված է նրա կողմից ընկալված տեխնիկական բարդություններով: Չնայած կարող է լինել մի քանի լրացուցիչ նախապատրաստություն և օպտիմիզացիա, որոնք անհրաժեշտ են ձեր վիդեոները ձեր կայքում տեղադրելու համար, գործընթացը վերջին մի քանի տարում բավականաչափ հեշտացել է ՝ տարբեր plugin- ներով և HTML5.

Օգնության համար ՝ հասկանալու, թե ինչպես տեղադրել ձեր տեսանյութերը ձեր կայքում, այս ուղեցույցը այստեղ է ՝ ձեզ ցույց տալու համար, թե ինչ դուք պետք է իմանաք, որպեսզի ստեղծեք պարտադիր տեսողական փորձ, որը օգտվողները շուտով չեն մոռանա:.

«Հերոս» ֆոնային տեսանյութը

Երբ մենք խոսում ենք ձեր կայքում տեղադրված տեսանյութերի մասին, մենք ոչ միայն խոսում ենք ցանկացած պատահական վայրում տեղադրված ցանկացած տեսանյութի մասին: Այս հոդվածը մասնավորապես վերաբերում է վեբ ձևավորման մեջ հանրաճանաչ և արդյունավետ միտումը օգտագործելու համար հերոսի ֆոնային տեսանյութ.

Ահա մի օրինակ.

Վիդեո ֆոնի վրա շարժման և արկածախնդրության օրինակ կարող է սրվելԱհա մի լավ օրինակ ՝ օգտագործելով հերոսի ֆոնային տեսանյութը: Ինչպես տեսնում եք, տեսանյութը դրա համար ապահովում է շարժման և արկածախնդրության զգացողություն հեծանիվների խանութ որ դեռ լուսանկարները պարզապես չէին կարողանում հասնել.

Մենք նախկինում նշել ենք հերոսի պատկերներն օգտագործելու հայեցակարգը «ծալքից վեր«Ձեր վեբ էջի տարածքը: Անհիշյալի համար հերոսի կերպարը (կամ երբեմն կոչվում է դրոշ) հաճախ առաջին դեպքն է, որ մարդիկ տեսնում են ձեր կայք ժամանելիս, որտեղ դրա ամենակարևոր բովանդակությունը ներկայացվում է հակիրճ և տեսողականորեն: Այս հիմնական բաժինը, որպես կանոն, լրացնում է ամբողջ էկրանի լայնությունն ու բարձրությունը `ստվերաներկ ֆոնային պատկերով, թողնելով շատ բաց տարածք` գործողության կոճակի կամ հղման համար կարևոր զանգի շուրջ:.

Նույն հայեցակարգը կիրառվում է այստեղ, բացառությամբ ակնհայտորեն այժմ մենք ֆոնային պատկերը փոխարինում ենք տեսանյութով: Դա կարող է սկզբում համեմատաբար աննշան փոփոխություն թվալ. Լավ է, այնպես որ մենք նախկինում ունեինք հեծանիվ վարող անձի լուսանկարը, բայց հիմա մենք ունենք հեծանիվ տեսանյութը գործի և վերցված զբոսանքի համար.?

Շարժման պարզ պահը դիտելը կարող է հսկայական ազդեցություն թողնել այն բանի վրա, թե ինչպես են օգտվողները ընկալելու և ներգրավվելու ձեր ապրանքանիշի հետ.

Կտտացրեք Tweet- ը

Դե, պարզվում է, որ շարժման պարզ պահը դիտելը կարող է հսկայական ազդեցություն թողնել այն բանի վրա, թե ինչպես են օգտվողները ընկալելու և ներգրավվելու ձեր ապրանքանիշի հետ: Տեսանյութերը ոգեշնչում են զգացմունքներն ու գործողությունները ավելի արագ, քան ցանկացած այլ միջոց: Եթե ​​փոխարկումը ձեր հիմնական նպատակն է, ապա ֆոնային տեսանյութը կարող է լինել հաջող կայքերի գաղտնի սոուսը.

Ինչու օգտագործել ֆոնային տեսանյութ?

Գերակշիռ ապացույցներ կան, որոնք ցույց են տալիս, թե որքան հզոր տեսանյութեր կարող են լինել բիզնեսի համար: Ահա մի տատանվող վիճակագրություն -ը կիսվել է Forbes -ի կողմից դա պետք է դառնար որպես դրդապատճառ.

  • Ձեր վայրէջքի էջում հերոսի ֆոնային տեսանյութը տեղադրելը կարող է բարձրացնել փոխակերպման տեմպերը 80% -ով
  • Արտադրանքի տեսանյութերը օգնում են ազդել հաճախորդների 90% -ի վրա ՝ գնման որոշում կայացնելիս
  • Հաճախորդների 64% -ը ավելի շատ հավանական է, որ ապրանքն առցանց գնի այդ մասին տեսանյութ դիտելուց հետո.
  • Թվային մարքեթինգի փորձագետ Jamesեյմս Մաքքյուվին գնահատում է դա վիդեո բովանդակության մեկ րոպեն արժե 1,8 միլիոն բառ.

Հերոսի ֆոնային տեսանյութի օրինակԿցանկանայի՞ք տեսնել այն Ազգային պարկեր, կամ ավելի շուտ կցանկանայիք փորձառություն նրանց?

Այսպիսով, հիմա, երբ մենք պարզեցինք, թե ինչու է վիդեո բովանդակությունը այդքան կարևոր, եկեք վերջապես տեսնենք, թե ինչպես կարելի է այս նրբագեղ բաները վերափոխել ձեր կայքում!

Տեղադրելով ֆոնային տեսանյութերը ձեր կայքում

It’sիշտ է, որ ընտրության համար կան շատ ֆայլերի ձևաչափեր, զննարկչի աջակցության տարբեր մակարդակներ և վեբ-էջում տեսանյութեր տեղադրելու տարբեր եղանակներ, բայց ես պատրաստվում եմ դա հնարավորինս պարզեցնել, և ես ձեզ կասեմ միայն առավել կարևոր տեղեկատվությունը քայլ առ քայլ ՝ հնարավոր բոլոր օգտագործողների համար առավելագույն համատեղելիության հասնելու համար.

Ինքնասպասարկում ձեր տեսանյութը ընդդեմ Օգտագործելով հոստինգի ծառայություն

Առաջին բանը, որ դուք պետք է որոշեք ՝ իրականում որտեղ են բնակվելու վիդեո ֆայլերը. Ձեր կայքի սեփական սերվերում (այլ կերպ ասած ՝ ձեր սեփական վեբ հոստինգի հաշիվը) կամ վիդեո հոստինգի հարթակում, ինչպիսին է YouTube- ը կամ Vimeo- ն:.

Մի քանի ինքնուրույն հյուրընկալող տեսանյութի առավելությունները ներառում է ավելի մեծ ազատություն ՝ կապված այն բանի հետ, թե ինչպես է այն ներկառուցված, տեսանյութի ամբողջական էկրանը պատրաստելու հարցում ավելի հեշտ իրականացում և դրամայնացման պորտալի հետևում տեսանյութը պաշտպանելու ավելի մեծ հսկողություն (դրա համար անհրաժեշտ կլինի հմուտ զարգացման ծրագրավորող վարձել):.

Մի քանի վիդեո հարթակների առավելությունները ներառեք մի փոքր ավելի հեշտ ներկառուցումը, արագ դասի սերվերների օգտագործումը (որը թեթևացնում է թողունակությունը ձեր սեփական սերվերի վրա), որոնք օպտիմիզացված են հատուկ վիդեո ֆայլերի համար և տարածման ավելի տարածված ունակություն.

Սովորաբար, կայքի համար նախատեսված ընդհանուր տեսանյութերի համար ես կառաջարկեի հեշտությամբ օգտագործել վիդեո հարթակ ՝ ձեր բովանդակությունը սպասարկելու համար, հատկապես, եթե ձեր կայքը գտնվում է համընդհանուր հոստինգի ծրագրի մեջ: Այնուամենայնիվ, ֆոնային հերոսի տեսանյութի առանձնահատկությունները պահանջում են որոշակի պարամետրեր, որոնք իրենց ավելի լավ են տրամադրվում ինքնասպասարկման համար: Կարող եք ունենալ ձեր մեթոդներից որևէ մեկը գործածելու պատճառները, այնպես որ ես երկուսին էլ հանձնարարական կտամ.

Մեթոդ 1. Ինքնասպասարկում

Նախ, տեսանյութը պետք է գոյություն ունենա ձեր սերվերում: Մենք կքննարկենք, թե ինչ տեսակի վիդեո ֆայլ եք անհրաժեշտ մի քիչ. Բայց այժմ, ինչպես նկարներ ավելացնելը, հարկ կլինի օգտագործել FTP ծրագիրը ձեր վիդեո ֆայլը ձեր սերվերին վերբեռնելու համար.

Այժմ մենք կտեղադրենք ճիշտ կոդը ձեր վեբ էջում `կախարդությունը ծառայելու համար: HTML5- ը թույլ է տալիս օգտագործել պիտակը, որը բարեբախտաբար փոխարինում է Flash- ը որպես տեսանյութերի նախընտրելի վեբ ձևաչափ: Ահա այն, ինչ մենք պետք է ստեղծենք պատշաճ ամբողջական էկրանով ֆոնային տեսանյութ.

HTML

Ընտրեք կոդ

CSS

տեսանյութ # bgvideo
դիրքը `ֆիքսված;
վերև ՝ 50%;
մնացել է `50%;
min- լայնությունը `100%;
մին-բարձրություն ՝ 100%;
լայնությունը `ավտո;
բարձրությունը ՝ ավտոմատ;
z- ինդեքս `-100;
-ms-transform: translateX (-50%) translateY (-50%);
-moz-transform: translateX (-50%) translateY (-50%);
-վեբ-փոխակերպում. translateX (-50%) translateY (-50%);
փոխակերպում. translateX (-50%) translateY (-50%);
ֆոն. url (placeholder.jpg) չկրկնվող;
ֆոնային չափս ՝ ծածկոց;
} Ընտրեք կոդ

Այստեղ բավականին քիչ բան է ընթանում, այնպես որ եկեք դիտենք, թե ինչ են նշանակում այս պարամետրերը.

խաղում է

Սա տեսանյութը պահպանում է զննարկչի մեջ և ձեր բովանդակության կողքին, ինչը կարևոր է այն կանխելու համար, որ այն իսկապես ամբողջ էկրանով անցնի, որտեղ ձեր ամբողջ էկրանն զբաղեցնում է տեսանյութը և ոչ այլ ինչ:.

Ավտոմատ միացում

Դուք, ամենայն հավանականությամբ, կցանկանաք, որ էջի բեռնվածքից հետո հերոսի ֆոնային տեսանյութը անմիջապես խաղա, առանց «նվագելու» կոճակը հարվածելու անհրաժեշտության: Դրա հետ կապված մի քանի խնդիրներ կան բջջային օգտագործողների համար, որոնց մասին կխոսեմ ավելի ուշ.

խլացված

Քանի դեռ ձեր տեսանյութը չի պարունակում էական տեղեկատվություն իր աուդիո ուղու վրա, ավելի լավ է անլեզել ձեր ֆոնային տեսանյութը: Մարդիկ ծայրաստիճան անհանգստություն են վայելում համացանցում ճամփորդելիս անսպասելի աուդիոով դիմավորելու համար, ուստի ավելի լավ է ձայնն անջատել, քան ձեր օգտվողներն անջատելը:.

հանգույց

Ձեր տեսանյութը կրկնելու դեպքում ընտրությունը պետք է կատարվի առհասարակ: Եթե ​​ցանկանում եք կատարելության զգացում, երբ տեսանյութը եզրափակվում է գործողության հստակ կոչով ՝ առանց շեղելու, ապա իմաստ կլինի թողնել այս պարամետրը.

պաստառ

Այստեղ պատկերի ֆայլի մատակարարումը կգործի որպես տեղապահ, քանի դեռ տեսանյութը չի ավարտվում բեռնումը և նվագելը: Քո հայեցողությունն է կախված, թե որն է առավել նպատակահարմար ցուցադրել ՝ անկախ այն բանի, թե դա դեռ տեսանյութի առաջին շրջանակն է, կամ պատկերանշանի կամ դրոշի նման մի բան.

Մեր CSS պարամետրերը ըստ էության հրահանգում են զննարկչին տարածել տեսանյութը ամբողջ էջում: Նկատենք, որ այստեղ է ֆոն սահմանելով օգտագործելով մեր նույնը պաստառ պատկեր; սա գործում է որպես տեսողական ընկալում այն ​​դեպքում, եթե հնաոճ զննարկիչը չի ճանաչում գույք.

Եթե ​​դուք մտադիր եք տեքստային հաղորդագրություն կամ գործի կանչի կոճակ ցուցադրել ֆոնային տեսանյութի վրա, ապա կարող եք դրանք սովորաբար ավելացնել դրանք div.

Մեթոդ 2. YouTube կամ Vimeo

Այս մեթոդի օգտագործմամբ վիդեո ֆայլերը կպահպանվեն ձեր կայքից, որտեղ նրանք փոխարենը ապրում են հատուկ սերվերների վրա, որոնք մասնագիտանում են վիդեո բովանդակության մեջ: Ենթադրելով, որ դուք արդեն վերբեռնե՞լ եք ձեր տեսանյութը, այժմ ձեզ հարկ կլինի ներկառուցված հղում. YouTube- ի համար դա կարելի է գտնել `սեղմելով« բաժնետոմս »կոճակը տեսանյութի էջում, ապա սեղմելով« ներկառուցել »: Vimeo- ի համար դուք նույնպես կտտացրեք «համօգտագործումը» և ապա պատճենեք բացվող պատուհանում ցուցադրված ներկառուցված հղումը.

ՀԱՇՎԻ ՀԻՇՈՒՄ: «Համօգտագործման» կոճակը օգտագործելիս YouTube- ը և Vimeo- ն նաև ընտրանքներ կցուցաբերեն ինքնաբաշխման, հանգույցի և նվագարկիչի վերահսկում ցուցադրելու / թաքցնելու համար: Համոզվեք, որ դրանք բաց չեք թողնում `ձեր տեսանյութը ցուցադրելու համար հեշտությամբ կարգավորելու համար: Vimeo- ն կարող է նաև պահանջել լրացուցիչ պարամետրեր որպեսզի այն պատշաճ կերպով աշխատի որպես ֆոնային տեսանյութ.

Կարող եք նկատել, որ ներկառուցված այս հղումները պարունակվում են անանունում iframe պիտակ, որը մի փոքր այլ կերպ է պահում, քան մեր HTML5 տարրը: Որպեսզի այս տեսանյութերը աշխատեն որպես ամբողջական էկրանային ֆոն, մենք պետք է մի փոքր արկած ունենանք մեր նշագրման հետ: Շնորհիվ մի մեթոդի կողմից Ռիշաբ Ագարվալ, կա մի պարզ ելք `դա կատարելու համար.

HTML

Ընտրեք կոդ

CSS

.videoContainer
դիրքը ՝ բացարձակ;
լայնությունը `100%;
բարձրությունը ՝ 100%;
վերև ՝ 0;
մնացել է ՝ 0;
հատակը ՝ 0;
աջ ՝ 0;
ցուցադրում ՝ ֆլեքս;
flex- ուղղություն ՝ սյունակ;
հիմնավոր-բովանդակություն. կենտրոն;
հավասարեցված իրեր. կենտրոն;
}
#hero
դիրքը `հարաբերական;
}
iframe
/ * ընտրովի * /
լայնությունը `100%;
բարձրությունը ՝ 100%;
} Ընտրեք կոդ

Ձեր YouTube- ը կամ Vimeo- ի վերբեռնումը այժմ պետք է վարվեն որպես ֆոնային ֆոնային տեսանյութ ձեր հերոսի պարունակության հետևում.

WordPress- ի օգտագործմամբ

Եթե ​​դուք օգտագործում եք WordPress- ը, կան վիդեո ֆոնային հավելումների բազմազանություն որը կարող է կատարել վերը նշված առաջադրանքը ՝ առանց ծածկագրից անհանգստանալու: Այնուամենայնիվ, դրանցից շատերը պրեմիում հավելումներ են, որոնք գուցե հարկ լինի գնել.

Հուշումներ և տեսանյութեր տեղադրելու լավագույն փորձերը

Հիմա, երբ ձեր տեսանյութը հաջողությամբ գործի դրված, եկեք մի փոքր ավելի խորությամբ փորենք օպտիմիզացման, ֆայլի չափի խճճվածությունների և ձեր հերոսի ֆոնային տեսանյութը ապահովելու և լավագույնս ապահովելու ուղղությամբ:.

Հասկանալով ֆայլի տեսակը

Ես նախկինում ասել եմ, որ վիդեո ֆայլերի տեսակների շատ տարբերակներ կան, որոնցից ամենատարածվածներն են mp4, ogg, և վեբ. Ժամանակակից բրաուզերները գրեթե համընդհանուր ընդունում են mp4 քանի որ գերակշռող ձևաչափն է, այնպես որ, առնվազն, սա այն ֆայլի տեսակն է, որը ձեզ հարկավոր է ներառել: Այնուամենայնիվ, սովորաբար լավ գաղափար է ապահովել, որ բոլոր օգտագործողները ստանան նմանատիպ փորձ, նույնիսկ եթե դրանք հնացած ծրագրաշար ունեն: այդ դեպքում ձեր մակնշումը նման կլինի այսպիսի.

Ընտրեք կոդ

ՀԱՇՎԻ ՀԻՇՈՒՄ: Տեղադրեք ձեր նախընտրած ֆայլի ձևաչափը վերջին աղբյուրի ցանկում: Սա այն է, ինչ զննարկիչը կկարդա վերջին, և, եթե օգտագործողի սարքը աջակցում է այն, դա կլինի բեռնման մեկը.

Հաշվի առնելու ևս մեկ տեխնիկական միջոց ՝ որն է վիդեո կոդեկ օգտագործել, որը հիմնականում այն ​​է, թե ինչպես է ֆայլը սեղմվում, այնուհետև մեկնաբանվում զննարկչի մեդիա նվագարկչի կողմից: Հիմնական կոդեկը, որին պետք է վերաբերվեք Հ.264, որն է այն, ինչ ընդունում են զննարկիչների մեծ մասը և ինչպիսի կայքեր են, ինչպիսիք են YouTube- ը և Vimeo- ն.

Եթե ​​այս ամենը կարծես շփոթեցնող ժարգոն է, մի անհանգստացեք: Շանսերը ձեր տեսանյութն արդեն ցանկալի է mp4 / H.264 ձևաչափ: Դա սովորաբար այն ֆայլի տեսակն է, որը ձեզ տրվում է ֆոնդային վիդեո կայքից ներբեռնելու ժամանակ: Եթե ​​դուք պետք է այլ ֆայլի տեսակը վերափոխեք mp4, ապա դա ձեզ հարկավոր է լրացուցիչ ծրագրաշար. Adobe Premiere Pro- ն տեսանյութերի հետ աշխատելու արդյունաբերության ստանդարտ է, բայց դա հասկանալի է, քան մարդկանց մեծամասնությունը: Բարեբախտաբար, կա անվճար ծրագիր, որը PC- ի և Mac- ի համար է կոչվում Ձեռքի արգելակ դա պետք է իրականացնի հենց այն, ինչ ձեզ հարկավոր է.

Հերոսի ֆոնային տեսանյութի օրինակ աուդիոովՍամուկավա-ջինջա սրբավայրը ստեղծում է գեղեցիկ և հանգստացնող փորձ ՝ տեսանյութերով (և աուդիո – բայց կտեսնեք, թե ինչու է այս դեպքում դա ընդունելի): Նկատի առեք տեսանյութերի խելացի ինտեգրումը իրենց նավիգացիոն մենյուի հետ.

Ձեր վիդեո ֆայլի օպտիմիզացումը

Երևի լավ գաղափար չէ ձեր տեսանյութը վերցնել, քանի որ այն ներկայումս կանգնած է և այն անմիջապես վերբեռնեք ձեր կայքում: Վիդեո ֆայլերը կարող են լինել մեծ, նույնիսկ 30 վայրկյան տեսահոլովակ, եթե դրանք բարձր կամ ուլտրաորոշիչ են: Հիշեք, որ ձեր օգտագործողները պետք է ներբեռնեն այս ֆայլերը իրենց զննարկչի առջև իրենց նվագարկումից առաջ, և 50 մեգաբայթ տեսանյութ բեռնելու սպասելը չի ​​նպաստում օգտագործողի հիանալի փորձի:.

Դուք պետք է կսմթել ձեր տեսանյութը բանաձևը, քիչ դրույքաչափ, և երկարությունը ֆայլի օպտիմալ չափի վրա սևեռելու համար: Ստուգեք այս հարմար ուղեցույց արագ հավաքածուի համար, թե ինչպես պատրաստել համացանցում տեսանյութեր.

Այսպիսով, որքան մեծ է շատ մեծ: Ընդհանրապես, դա է համարվում 5 մեգաբայթ ֆոնային տեսանյութի առավելագույն չափն է ՝ ֆայլի չափերով 1 մեգաբայթից պակաս իդեալական լինելը Սա կարող է լինել բավականին բարդ `հասնելու համար, որպեսզի հավասարակշռություն հաստատվի որակի և չափի միջև: Սկսնակների համար ձեր բանաձևը մոտավորապես պահեք 720p կամ ավելի քիչ `պարզության և տնտեսության լավ խառնուրդի համար: Կտրուկ 4K տեսանյութը կարող է շքեղ տեսք ունենալ, բայց հիշեք, որ մարդկանց մեծամասնությունը զննարկում է ցանցը 15 less-ով պակաս էկրաններով, ուստի ավելացված բանաձևը պարզապես ավելորդ կլինի:.

Երկարության առումով, իդեալական վազքի ժամանակը կլինի ինչ-որ տեղ 10–30 վայրկյան. Եթե ​​դա շատ կարճ է, ձեր տեսանյութը կարող է աննշան զգալ կամ, եթե այն looped է, չափազանց կրկնվող: Տեսանյութը, որը շատ երկար է, վտանգում է օգտվողների ուշադրությունը կորցնելու և ֆայլի չափը բարձրացնելու ռիսկը.

Bit դրույքաչափը էական ազդեցություն է թողնում ֆայլի չափի վրա, և դա հավանաբար այն է, ինչ դուք կծախսեք ձեր ջանքերի մեծ մասը ՝ tweaking: Ձեր տեսանյութի համար իդեալական համար գտնելը մի գործընթաց է, որը սույն հոդվածի շրջանակներից դուրս է, բայց YouTube- ը և Vimeo- ն ներկայացնում են ուղեցույցներ ֆայլերի օպտիմիզացիայի վերաբերյալ այստեղ և այստեղ համապատասխանաբար, դա կօգնի ձեզ ճիշտ ուղղությամբ վարել.

Ձայնը հեռացնելը

Ինչպես ավելի վաղ առաջարկվեց, ձեր ֆոնային տեսանյութը խլելը UX- ի գերադասելի պրակտիկայում է: Եթե ​​իրոք ձայնի նվագարկման համար հիմք չկա, ապա իրականում կարող եք գնալ ավելին, քան տեսանյութը խճճելը և ֆայլից ամբողջովին հեռացնել աուդիո ուղուց: Դա անելը մեծապես կկրճատի ֆայլի չափը `ազատվելով ավելորդ տվյալներից: Սա թարգմանում է ձեր սերվերի ավելի քիչ թողունակությունը և ձեր օգտվողների ավելի արագ բեռնումը. Ձեռքի արգելակ լավ տարբերակ է ֆայլերից աուդիո հետքերը հեշտությամբ հեռացնելու համար.

Autoplay և շարժական սարքեր

Ես նշեցի, որ կա մի փոքրիկ զգուշություն ՝ բջջային օգտագործողների համար autoplay- ի պարամետրը օգտագործելով: Որպես անվտանգության նախազգուշացում ՝ տվյալների անցանկալի օգտագործումը կանխելու համար, շատ բջջային հեռախոսներ հրաժարվելու են համացանցում տեսահոլովակների ինքնաբաշխումից: Սա նշանակում է, որ «Play» կոճակը կներառվի որպես ծածկույթ ձեր ֆոնային տեսանյութի վերևում: Թեև սա աննշան տհաճություն է, բայց իրական գրգռումն այն է, որ այս ծածկույթը կարող է պոտենցիալ ծածկել ձեր հերոսի բաժնում տեղադրված ցանկացած հղումներ կամ բովանդակություն: Դհ!

Պարզվում է, որ iOS- ի վերջին տարբերակները այժմ աջակցում են ավտոպլայդային հնարավորությունը, բայց շատ Android հեռախոսներ և այլ բջջային օպերացիոն համակարգեր դեռ խայտաբղետ են: Չնայած JavaScript- ի բարդ ելքերի և զննարկիչների հաքերի միջոցով հնարավոր է լուծել այս խնդիրը, դրանց հուսալիությունը անհամապատասխան է և ամբողջովին խորհուրդ չի տրվում: Օգտագործողի առավել հետևողական փորձի համար լավագույն լուծումը գուցե կարող է լինել լրատվամիջոցների հարցման օգտագործումը `տեսանյութն ամբողջությամբ հեռացնելու շարժական սարքերում և այն փոխարինելու ձեր տեղապահի պատկերով: Դա անելու համար դրեք այն ձեր CSS ֆայլում.

@media էկրան և (առավելագույն սարքի լայնությունը ՝ 768px) {
#hero
ֆոն. url (placeholder.jpg) չկրկնվող;
ֆոնային չափս ՝ ծածկոց;
}
#bgvideo
ցուցադրում ՝ ոչ մեկը;
}
} Ընտրեք կոդ

Հակապատկեր տեքստ & Տեսանյութ

Տեսողական լավագույն փորձի համար ուզում եք համոզվել, որ ձեր տեքստը ընթեռնելի է և առանձնանում է դրա հետևում գտնվող տեսանյութից: Ավելի թեթև տեսանյութով թեթև տեքստի կամ ավելի թեթև տեսանյութի մուգ տեքստի օգտագործմամբ, համոզվեք, որ ձեր օգտագործողները բաց չթողնեն ձեր կարևոր հերոսների բաժինը կամ գործի կանչեն.

Փորձեք օգտագործել տեսանյութեր, որոնք հետևում են որոշակի գունային պալիտրա, նույնիսկ ավելի լավ է, եթե այդ գույները համապատասխանում են ձեր ապրանքանիշի ոճի ուղեցույցին: Չափից շատ գույներով ֆոնային տեսանյութը կարող է տեղից դուրս թվալ ձեր կայքում կամ կարող է չափազանց շեղվել վերը նշված տեքստից.

Ձեր տեսանյութի վիզուալ երանգը փոխելու համար արդյունավետ միջոց է ծածկույթների և ֆիլտրերի կիրառումը: Դա հնարավոր է անել Adobe Premiere- ի նման ծրագրակազմի խմբագրման միջոցով, կամ նույնիսկ ժամանակակից բրաուզերների միջոցով ՝ CSS- ի միջոցով զտել գույք: Փորձեք գունային ծածկույթների, հագեցվածության, խառնուրդի և անթափանցիկության փորձեր կատարել `ձեր տեսանյութի գեղագիտական ​​համադրությունը համապատասխանեցնելու համար, որպեսզի այն համապատասխանի ձեր ապրանքանիշի ոճին և չհեռացվի տեքստից.

Հերոսի ֆոնային օրինակ `ներգրավված խմբագրմամբThe FreshDesign գործակալություն օգտագործում է ներգրավված խմբագրում ՝ փոխանցելու էություն և բնույթ, որը հետաքրքիր է դիտել, անկախ նրանից, թե քանի անգամ է այն loops: Գույնի զտիչը նույնպես լավ հակադրվում է տեքստի և պատկերանշանի հետ.

Որտեղ գտնել տեսանյութեր ձեր նախապատմության համար

Դուք այժմ պատրաստ եք ձեր կայքում ավելացնել արդյունավետ և կատարելապես օպտիմիզացված ֆոնային տեսանյութեր … բացառությամբ, հիմա ձեզ հարկավոր է իսկական տեսանյութ: Այսպիսով, որտեղ եք ստանում մեկը?

Ամենահեշտ և ամենաթանկ լուծումը վիդեո բովանդակություն գնելն է այնտեղի բազմաթիվ ֆոնդային կադրերի կայքերից մեկից. iStock- ը, Shutterstock, Լուծել, Ծածկոց եւ նույնիսկ Vimeo հոնորար անվճար մեծ ռեսուրսներ են `պրոֆեսիոնալ որակյալ կադրեր ձեռք բերելու համար.

ՀԱՇՎԻ ՀԻՇՈՒՄ: Նախազգուշական խոսք ֆոնդային կադրերը դիտելիս: Մի օգտագործեք այն պարզապես այն օգտագործելու համար: Տեսանյութը պետք է ավելացնի ձեր կայքի հաղորդագրությունը և վաստակի դրա գոյությունը: Շատ ֆոնդային տեսանյութեր չափազանց ընդհանուր և անթերի տեսք ունեն, և դրանց միաչափ չափի բնույթը կարող է ոչինչ անել ոչինչ ՝ ձեր կայքը բարձրացնելու կամ տարբերելու համար..

Լավագույն արդյունքների համար դուք կցանկանաք վարձել ստեղծագործական գործակալություն կամ ազատ տեսագրող, որպեսզի ձեզ տրամադրի հարմարեցված կադրեր, որոնք իսկապես կներգրավեն օգտվողներին ձեր արտադրանքի կամ ապրանքանիշի էությամբ: Ես կառաջարկեի Google- ի որոնում կատարել ձեր մոտակա մետրոպոլիայի տարածքում գտնվող գործակալությունների կամ արտադրական ընկերությունների համար և զննել դրանց պորտֆելները: Ստացեք առաջարկ և գնի նախահաշիվ մի քանի տարբերից `ձեր ընտրանքները կշռադատելու համար: Սա կլինի ամենաթանկ տարբերակը, չնայած և կարող է արժեն հազարավորներ ՝ միայն մեկ վիդեո ֆոնի համար.

Freelancing կայքեր, ինչպիսիք են Upwork կամ Fiverr- ը կարող է ավելի բյուջետային լինել, բայց դա մի փոքր հարված է այն բանի, թե որ արտադրական արժեքներն ու պարտավորությունն են նրանք ապահովում.

Եզրակացություն

Բոլորը սիրում են լավ տեսանյութ: Մենք, կարծես, նրանց համար ծծողներ ենք. Դրանք ողողաբար սպառում ենք մեր հեռուստատեսություններում, համակարգիչներում, հեռախոսներում, պլանշետներում, մեր սեղաններում, մեր բազմոցներում, մեր մեքենաներում, ամենուր և ցանկացած վայրում, որտեղ մենք կարող ենք դիտել դրանք.

Ասում են, որ համացանցում տեղեկատվության 95% -ը գրավոր լեզու է: Այնուամենայնիվ, ներկայիս կանխատեսումներով և միտումներով, ինչպիսին են դրանք, մեր ինտերնետային դիտման փորձը շուտով կարող է մեծապես կապված լինել տեսանյութի հետ: Սա իմաստ ունի ՝ հաշվի առնելով, թե որքանով են առավել արդյունավետ տեսանյութերը ոգեշնչող գործողություն, քան բառերը.

Չնայած նրան, որ յուրաքանչյուր բիզնես կամ կայքէջ պետք չէ ունենալ ֆոնային տեսանյութեր իր ապրանքանիշը փոխանցելու համար, մեծ հավանականություն կա, որ մեկը կօգնի ձերը: Այժմ, երբ դուք գիտեք, թե ինչպես տեղադրել ձեր կայքէջը, ես ձեզ հորդորում եմ տեսնել, թե հերոսի ֆոնային տեսանյութը որքանով կտանի ձեր բիզնեսը.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me