Kohët e fundit, ne jemi duke studiuar përdorimin e videos në vend të animacionit dhe videos në vend të animacionit sprite. Ne e quajmë këtë lloj video video interaktive.
Animacion tradicional sprite: hapësirë e madhe në disk, shkarkimi i ngadaltë, veçanërisht luajtja në internet, do të jetë më e ngadaltë
Shumë skedarë, shumë kërkesa http kur luani në internet, do të shkaktojnë përgjigje të ngadaltë ose sjellje anormale. Prandaj, ka një nevojë urgjente për të zhvilluar një sërë teknologjie për të zëvendësuar animacionin sprite me video. Ne e quajmë këtë lloj video një video interaktive
Problemet me videon tradicionale:
1. Mund të luhet vetëm në një zonë në formë katrore
2. Nën iPad, është një dritare për të luajtur, dhe nën iPhone, mund të luhet vetëm në ekran të plotë.
3. Kur luani, patjetër që do të shfaqet në ballë
Videoja interaktive ka këto karakteristika:
Nën iPhone, nuk kërkohet luajtja në ekran të plotë, ajo mund të luhet në një zonë
Video interaktive mund të shfaqet poshtë objekteve të zakonshme grafike
Videoja interaktive mund të ketë një maskë, në mënyrë që sfondi i videos të hiqet dhe video dhe objektet e zakonshme grafike të integrohen
përmbledhje: Për videon e përdorur për të luajtur, ne do ta vendosim atë si një video tradicionale. Për video që duhet të përdoren për qëllime specifike, ne i vendosim ato si video interaktive. Hulumtimi ka dhënë rezultate paraprake. Nga rruga, ajo përmbledh problemet aktuale të hasura në zhvillimin audio dhe video të H5 celular në vitet e ardhshme dhe ofron zgjidhjet e veta. Shikoni efektin përfundimtar aktual: i pajtueshëm me PC (> IE9), iphone, ipad, Android 5.0
Zgjidh problemet e manualit, automatikës dhe dritares në iPhone, dhe mundet në thelb të përdoret në prodhimin aktual. Në të djathtë është skedari origjinal i videos mp4, videoja në të majtë zëvendëson animacionin dhe më pas mbështet efektin e maskës së sfondit, mund të zbulojë hartën bazë dhe mbështet një seri operacionesh interaktive
Audio H5
Sa herë që një objekt audio kalon nëpër Audio të ri, një fije e re mund të shihet në IOS.
Zgjidhja: Një objekt i ri Audio, duke zëvendësuar adresa të ndryshme audio, arrin qëllimin për të mos hapur më shumë fije.
Mbështetja nuk është e mirë në Android
Zgjidhja: Problemi në versionin më të ulët të Android nuk është zgjidhur. Në përgjithësi, zhvillimi i përzier mund të trajtohet duke rregulluar ndërfaqen themelore, siç është hapësi i telefonit
Nuk mund të luhet automatikisht në iphone
Zgjidhja: Riprodhimi automatik në iphone është një proces i bërë kur është dizajnuar IOS. Duket se është për të parandaluar vjedhjen automatike të trafikut.
Ta themi thjesht, ajo duhet të shkaktohet manualisht duke simuluar përdoruesin, kështu që ne duhet ta quajmë këtë pjesë të kodit në fillim:
Kopjoni kodin
// Rregulloni problemin që shfletuesi ios nuk mund të luajë automatikisht audio. Krijoni audio të re kur ngarkoni dhe zëvendësoni src kur e përdorni.
Xut.fix = Xut.fix || {};
nëse (Xut.plat.isBrowser && Xut.plat.isIOS) {
var ështëAudio = false
var fixaudio = funksioni () {
nëse (! ështëAudio) {
isAudio = e vërtetë;
Xut.fix.audio = Audio e re ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('fillimi i prekjes', rregullimi i audios, false);
}
Kopjoni kodin e mësipërm
Nëse e lidhni një kod të tillë me trupin: krijoni një objekt audio duke e shkaktuar atë manualisht dhe më pas ruajeni në globale
Kur përdoret si më poshtë:
Kopjoni kodin
// Nëse përdorni Xut.fix.audio për të specifikuar src për shfletuesin ios, ju lutemi referojuni app.js për fillimin
nëse (Xut.fix.audio) {
audio
=
Xut.fiks.audio;
audio.src = url;
} Tjetër {
audio = Audio e re (url);
}
audio.autoplay = e vërtetë;
audio.luaj ();
Thjesht zëvendësoni objektin audio. Ta themi thjesht, ai duhet të jetë objekti i krijuar nga përdoruesi për të luajtur.
Audio audio H5
Etiketat e videos mund të përdoren rrallë në terminalin celular, mbështetja për Android është shumë e keqe, vizualisht 5.0 është më e mirë. Problemi i vjetër në iPhone nuk mund të luhet automatikisht (Kurseni të dhëna, kurseni motrën tuaj !!!) dhe e paracaktuara është kontrolli në ekran të plotë për t'u luajtur. Për një kohë të gjatë, unë e injoroja këtë përpunim video. Android përdor shtresën e poshtme, iPhone përdor drejtpërdrejt VideoJS, blicin e integruar dhe çelësin h5, blici gjithashtu ka probleme mbështetjeje. Pak më parë, shefi kishte një kërkesë. Ne aplikuam shumë animacione, të gjitha ishin animacione të kombinuara të rrugëve sprite, duke filluar nga qindra megabajt në qindra megabajt nën një aplikacion, kështu që ekziston një nevojë urgjente për një zgjidhje për të kompresuar imazhet. Zgjidhja përfundimtare është përdorimi i videos në vend të animacionit, sepse teknologjia e kompresimit të videos është zhvilluar për shumë vite dhe ka qenë shumë e pjekur. Tani teknologjia e kompresimit të videos mund të konvertojë me lehtësi 720P. Filma me definicion të lartë, të kompresuar në 10M / min, ose 160K / sek. Madhësia e skedarit e sekuencës së imazhit është të paktën disa dhjetëra herë më e vogël. Në të njëjtën kohë, shumica e pajisjeve mbështesin dekompresimin e harduerit të videos, kështu që konsumi i CPU-së së riprodhimit të videos është shumë i ulët, konsumi i baterisë është gjithashtu shumë i ulët dhe shpejtësia e riprodhimit është gjithashtu e shpejtë. Edhe luajtja në ekran të plotë prej 25 kornizash mund të arrihet lehtësisht.
Plani është finalizuar, dhe disa probleme për t'u zgjidhur janë këtu.
E gjithë video, duke përfshirë disa objekte në video, mund t'u përgjigjet klikimeve të përdoruesve, diapozitivave dhe operacioneve të tjera nën iPhone, mund të luhet në një dritare, mund të filtrojë sfondin dhe mund të përdoret si një imazh PNG. Videoja zëvendëson animacionin dhe më pas mbështet efektin e maskës së sfondit, i cili mund të zbulojë imazhin bazë dhe gjithashtu zgjidh problemin e ekranit manual, automatik dhe jo të plotë
dritarja e iphone
Zgjidhja: Kombinoni përpunimin përmes etiketave të kanavacës + video
Parimi: Merrni kornizën origjinale të figurës së videos dhe tërhiqeni atë në faqe përmes pëlhurave
Këtu unë bashkëngjit direkt kodin burimor, kodi është shkruar në përgjithësi, por thekson disa pika kryesore
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Video në vend të animacionit
Kjo është pak e rëndë. Duhet të jetë interaktive dhe të tërheqë kanavacën për të arritur qëllimin e kontrollit të imazhit. Nuk e kam mbaruar ende të shkruaj të gjithë, dhe nevojat e përgjithshme të kompanisë nuk do ta kenë këtë. Këtu është një përshkrim i shkurtër, ai përpunohet gjithashtu nga kanavacë + video, por një enë e kanavacës së memorizuar kërkohet për të bërë një parapërpunim. Përmes përpunimit paraprak, merrni pikselët e secilës fotografi, dhe duke ndryshuar vlerën e secilit pixel RBG, ajo mund të filtrojë sfondin, në mënyrë që të mund të përdoret si një imazh PNG. Do ta shkruaj më vonë dhe do ta botoj
Produkti ynë të tjera:
