Վերջերս մենք ուսումնասիրում ենք տեսանյութի օգտագործումը անիմացիայի փոխարեն և տեսանյութը սփրայթ անիմացիայի փոխարեն: Մենք այս տեսակ տեսանյութն անվանում ենք ինտերակտիվ տեսանյութ:
Ավանդական սփրայթ անիմացիա. մեծ սկավառակի տարածություն, դանդաղ ներբեռնում, հատկապես առցանց նվագարկումը, ավելի դանդաղ կլինի
Չափազանց շատ ֆայլեր, չափազանց շատ http հարցումներ առցանց խաղալիս կհանգեցնեն դանդաղ արձագանքի կամ աննորմալ վարքի: Հետևաբար, հրատապ անհրաժեշտություն կա մշակել մի շարք տեխնոլոգիաներ՝ սփրայթ անիմացիան տեսանյութով փոխարինելու համար: Այս տեսակի տեսանյութը մենք անվանում ենք ինտերակտիվ տեսանյութ
Ավանդական տեսանյութի հետ կապված խնդիրներ.
1. Կարելի է խաղալ միայն քառակուսի ձևավորված տարածքում
2. iPad-ի տակ այն խաղալու պատուհան է, իսկ iPhone-ի տակ՝ միայն ամբողջ էկրանով:
3. Խաղալու ժամանակ այն անպայման կհայտնվի առաջնագծում
Ինտերակտիվ տեսանյութն ունի հետևյալ բնութագրերը.
IPhone-ի տակ ամբողջ էկրանով նվագարկումը պարտադիր չէ, այն կարելի է նվագարկել մեկ տարածքում
Ինտերակտիվ տեսանյութը կարող է հայտնվել սովորական գրաֆիկական օբյեկտների տակ
Ինտերակտիվ տեսանյութը կարող է ունենալ դիմակ, որպեսզի տեսահոլովակի ֆոնը հեռացվի, և տեսագրությունը և սովորական գրաֆիկական օբյեկտները կարողանան ինտեգրվել:
Ամփոփում. Նվագարկման համար օգտագործվող տեսահոլովակի համար մենք այն կսահմանենք որպես ավանդական տեսահոլովակ: Տեսանյութերի համար, որոնք պետք է օգտագործվեն հատուկ նպատակներով, մենք դրանք սահմանում ենք որպես ինտերակտիվ տեսանյութեր: Հետազոտությունը տվել է նախնական արդյունքներ։ Ի դեպ, այն ամփոփում է առաջիկա մի քանի տարիներին բջջային H5-ի աուդիո և վիդեո մշակման ընթացքում առաջացած փաստացի խնդիրները և տալիս իր լուծումները։ Նայեք վերջնական իրական էֆեկտին. համատեղելի է ԱՀ-ի (>IE9), iPhone-ի, iPad-ի, Android 5.0-ի հետ:
Լուծեք iPhone-ի ձեռքով, ավտոմատ և պատուհանների խնդիրները, և դա կարող է հիմնականում օգտագործվում է իրական արտադրության մեջ: Աջ կողմում բնօրինակ վիդեո mp4 ֆայլն է, ձախ կողմում գտնվող տեսանյութը փոխարինում է անիմացիան, այնուհետև աջակցում է ֆոնային դիմակի էֆեկտին, կարող է բացահայտել հիմնական քարտեզը և աջակցում է մի շարք ինտերակտիվ գործողությունների:
H5 աուդիո
Ամեն անգամ, երբ աուդիո օբյեկտը փոխանցվում է նոր Audio-ով, նոր թեմա կարելի է տեսնել IOS-ում:
Լուծում. Նոր աուդիո օբյեկտը, փոխարինելով տարբեր աուդիո հասցեներ, հասնում է ավելի շատ թելեր չբացելու նպատակին:
Աջակցությունը լավ չէ Android-ում
Լուծում. Android-ի ստորին տարբերակի խնդիրը լուծված չէ: Ընդհանրապես, խառը զարգացումը կարելի է կարգավորել հիմքում ընկած ինտերֆեյսը կարգավորելու միջոցով, ինչպիսին է phonegap-ը
Հնարավոր չէ ավտոմատ խաղալ iPhone-ով
Լուծում. iphone-ում ավտոմատ նվագարկումը գործընթաց է, որն իրականացվում է IOS-ի նախագծման ժամանակ: Թվում է, թե դա երթևեկության ավտոմատ գողությունը կանխելու համար է:
Պարզ ասած, այն պետք է ձեռքով գործարկվի՝ օգտատիրոջը նմանակելով, այնպես որ մենք պետք է հենց սկզբից զանգահարենք կոդի այս հատվածը.
Պատճեն կոդը
//Հաստատեք այն խնդիրը, որ ios բրաուզերը չի կարող ավտոմատ կերպով աուդիո նվագարկել: Բեռնելիս ստեղծեք նոր աուդիո և այն օգտագործելիս փոխարինեք src-ը:
Xut.fix = Xut.fix||{};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = կեղծ
var fixaudio = ֆունկցիա() {
եթե (!isAudio) {
isAudio = ճշմարիտ;
Xut.fix.audio = նոր Աուդիո();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Պատճենեք վերը նշված կոդը
Եթե դուք նման կոդ եք կապում մարմնին, ապա ստեղծեք աուդիո օբյեկտ՝ ձեռքով գործարկելով այն, այնուհետև պահեք այն գլոբալում:
Երբ օգտագործվում է հետևյալ կերպ.
Պատճեն կոդը
//Եթե օգտագործում եք Xut.fix.audio՝ ios բրաուզերի համար src նշելու համար, խնդրում ենք դիմել app.js-ին սկզբնավորման համար:
if (Xut.fix.audio) {
Աուդիո
=
Xut.fix.audio;
audio.src = url;
} {Else
աուդիո = նոր աուդիո (url);
}
audio.autoplay = ճշմարիտ;
audio.play();
Պարզապես փոխարինեք աուդիո օբյեկտը: Պարզ ասած, այն պետք է լինի այն օբյեկտը, որը ստեղծվել է օգտագործողի ձգան խաղալու համար:
H5 վիդեո աուդիո
Վիդեո պիտակները կարող են հազվադեպ օգտագործվել բջջային տերմինալում, Android-ի աջակցությունը շատ վատ է, տեսողականորեն 5.0-ն ավելի լավն է: IPhone-ի հին խնդիրը չի կարող ավտոմատ կերպով նվագարկվել (Պահպանեք տվյալները, փրկեք ձեր քրոջը!!!), իսկ լռելյայն՝ ամբողջ էկրանով կառավարում խաղալու համար: Երկար ժամանակ ես անտեսում էի այս տեսանյութի մշակումը։ Android-ն օգտագործում է ստորին շերտը, iPhone-ն ուղղակիորեն օգտագործում է VideoJS, ներկառուցված ֆլեշ և h5 անջատիչ, ֆլեշը նույնպես ունի աջակցության խնդիրներ։ Քիչ առաջ շեֆը պահանջ ուներ. Մենք կիրառեցինք չափազանց շատ անիմացիաներ, դրանք բոլորը սփրայթ երթուղիների համակցված անիմացիաներ էին, որոնք տատանվում էին հարյուրավոր մեգաբայթից մինչև հարյուրավոր մեգաբայթ մեկ հավելվածի տակ, ուստի պատկերները սեղմելու հրատապ լուծման կարիք կա: Վերջնական լուծումը մուլտիպլիկացիայի փոխարեն տեսանյութ օգտագործելն է, քանի որ վիդեո սեղմման տեխնոլոգիան մշակվել է երկար տարիներ և շատ հասունացել է: Այժմ վիդեո սեղմման տեխնոլոգիան կարող է հեշտությամբ փոխակերպել 720P: Բարձր հստակությամբ ֆիլմեր՝ սեղմված մինչև 10 Մ/րոպե կամ 160 Կ/վրկ: Պատկերի հաջորդականության ֆայլի չափը առնվազն մի քանի տասնյակ անգամ փոքր է: Միևնույն ժամանակ, սարքերի մեծ մասն աջակցում է տեսանյութի ապարատային ապակոմպրեսիային, այնպես որ վիդեո նվագարկման պրոցեսորի սպառումը շատ ցածր է, մարտկոցի սպառումը նույնպես շատ ցածր է, և նվագարկման արագությունը նույնպես արագ է: Նույնիսկ 25 կադրի ամբողջ էկրանով նվագարկումը կարելի է հեշտությամբ հասնել:
Ծրագիրը վերջնական տեսքի է բերվել, և այստեղ կան մի շարք լուծվող խնդիրներ։
Ամբողջ տեսանյութը, ներառյալ տեսանյութի որոշ առարկաներ, կարող է արձագանքել օգտատերերի սեղմումներին, սլայդներին և iPhone-ի տակ գտնվող այլ գործողություններին, կարող է նվագարկվել պատուհանում, կարող է զտել ֆոնը և կարող է օգտագործվել որպես PNG պատկեր: Տեսանյութը փոխարինում է անիմացիան, այնուհետև աջակցում է ֆոնային դիմակի էֆեկտը, որը կարող է բացահայտել հիմնական պատկերը, ինչպես նաև լուծում է ձեռքով, ավտոմատ և թերի էկրանի խնդիրը։
iphone պատուհան
Լուծում. Միավորել մշակումը կտավի + վիդեո պիտակների միջոցով
Սկզբունք. Ստացեք տեսահոլովակի բնօրինակ պատկերի շրջանակը և նկարեք այն էջը cannavs-ի միջոցով
Այստեղ ես ուղղակիորեն կցում եմ սկզբնաղբյուրը, կոդը ընդհանուր առմամբ գրված է, բայց ընդգծում է մի քանի հիմնական կետ
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Տեսանյութ՝ անիմացիայի փոխարեն
Սա մի քիչ դժվար է: Այն պետք է լինի ինտերակտիվ և քաշի կտավը՝ պատկերը կառավարելու նպատակին հասնելու համար: Ես դեռ չեմ ավարտել այդ ամենը գրելը, և ընկերության ընդհանուր կարիքները դա չեն ունենա: Ահա հակիրճ նկարագրությունը, այն նաև մշակվում է կտավով + տեսանյութով, սակայն նախնական մշակում կատարելու համար անհրաժեշտ է պահված կտավի կոնտեյներ։ Նախամշակման միջոցով ստացեք յուրաքանչյուր նկարի պիքսելները և փոխելով RBG յուրաքանչյուր պիքսելի արժեքը՝ այն կարող է զտել ֆոնը, որպեսզի այն օգտագործվի PNG պատկերի նման։ Հետո կգրեմ ու կհրապարակեմ~~
Մեր մյուս արտադրանքը:
