V zadnjem času preučujemo uporabo videa namesto animacije in video namesto sprite animacije. Tovrstni video imenujemo interaktivni video.
Tradicionalna sprite animacija: velik prostor na disku, počasno nalaganje, zlasti spletno predvajanje, bo počasnejše
Preveč datotek, preveč http zahtev med spletnim predvajanjem bo povzročilo počasen odziv ali nenormalno vedenje. Zato je nujno treba razviti nabor tehnologij, ki bi nadomeščali sprite animacijo z videom. Tovrstni video imenujemo interaktivni video
Težave s tradicionalnim videom:
1. Igra se lahko samo v kvadratni obliki
2. Pod iPadom je okno za igranje, pod iPhoneom pa ga je mogoče predvajati samo v celozaslonskem načinu.
3. Pri igranju se bo zagotovo pojavil v ospredju
Interaktivni video ima naslednje značilnosti:
Pri iPhonu predvajanje na celotnem zaslonu ni potrebno, lahko ga predvajate na enem območju
Interaktivni video se lahko prikaže pod običajnimi grafičnimi predmeti
Interaktivni video ima lahko masko, tako da je mogoče odstraniti ozadje video posnetka in integrirati video in navadne grafične predmete
Povzetek: Za video, ki se uporablja za predvajanje, ga bomo nastavili kot tradicionalni video. Za videoposnetke, ki jih je treba uporabiti za posebne namene, smo jih nastavili kot interaktivne videoposnetke. Raziskava je dala predhodne rezultate. Mimogrede povzema dejanske težave, s katerimi se bo v naslednjih nekaj letih srečeval avdio in video razvoj mobilnega H5, in ponuja lastne rešitve. Oglejte si končni dejanski učinek: združljiv z osebnim računalnikom (> IE9), iphone, ipad, Android 5.0
Rešite težave z ročnimi, samodejnimi in okenskimi okni na iPhonu, in to lahko v bistvu uporabljajo v dejanski proizvodnji. Na desni je izvirna datoteka mp4 video, video na levi nadomešča animacijo, nato pa podpira učinek maske v ozadju, lahko razkrije osnovni zemljevid in podpira vrsto interaktivnih operacij
Zvok H5
Vsakič, ko se avdio objekt prenese skozi nov zvok, je v sistemu IOS mogoče videti novo nit.
Rešitev: Nov zvočni objekt z zamenjavo različnih zvočnih naslovov doseže cilj, da ne odpre več niti.
Podpora v Androidu ni dobra
Rešitev: Težava v spodnji različici Androida ni rešena. Na splošno je mogoče z mešanim razvojem prilagoditi osnovni vmesnik, na primer fonegap
Na iPhonu ni mogoče samodejno predvajati
Rešitev: Samodejno predvajanje na iphone je postopek, ki je bil izveden, ko je bil zasnovan IOS. Zdi se, da želimo preprečiti samodejno krajo prometa.
Preprosto povedano, sprožiti ga je treba ročno s simulacijo uporabnika, zato moramo ta del kode poklicati že na začetku:
Kopirajte kodo
// Odpravite težavo, da brskalnik ios ne more samodejno predvajati zvoka. Ustvarite nov zvok pri nalaganju in zamenjajte src, ko ga uporabljate.
Xut.fix = Xut.fix || {};
če (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = napačno
var fixaudio = function () {
if (! isAudio) {
isAudio = res;
Xut.fix.audio = nov zvok ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Kopirajte zgornjo kodo
Če takšno kodo vežete na telo: ustvarite zvočni objekt tako, da ga ročno sprožite, in ga shranite v globalno
Kadar se uporablja na naslednji način:
Kopirajte kodo
// Če uporabljate Xut.fix.audio za določanje src za brskalnik ios, glejte app.js za inicializacijo
če (Xut.fix.audio) {
audio
=
Xut.fix.audio;
audio.src = url;
} Else {
audio = nov zvok (url);
}
audio.autoplay = res;
audio.play ();
Preprosto zamenjajte zvočni objekt. Preprosto povedano, to mora biti predmet, ki ga ustvari uporabniški sprožilec za predvajanje.
H5 video zvok
Video oznake se lahko redko uporabljajo na mobilnem terminalu, podpora za Android je slaba, vizualno 5.0 je boljša. Stare težave v iPhonu ni mogoče predvajati samodejno (shranite podatke, shranite svojo sestro !!!), privzeti nadzor pa je celozaslonski nadzor. Dolgo sem ignoriral to obdelavo videa. Android uporablja spodnjo plast, iPhone neposredno uporablja VideoJS, vgrajeno bliskavico in stikalo h5, bliskavica ima tudi težave s podporo. Pred časom je imel šef povpraševanje. Uporabili smo preveč animacij, vse so bile kombinirane animacije sprite poti, ki segajo od sto megabajtov do stotine megabajtov v eni aplikaciji, zato je nujno potrebna rešitev za stiskanje slik. Končna rešitev je uporaba videoposnetka namesto animacije, saj je tehnologija stiskanja videov razvita že vrsto let in je zelo zrela. Zdaj lahko tehnologija stiskanja videa enostavno pretvori 720P. Filmi visoke ločljivosti, stisnjeni na 10M / min ali 160K / sec. Velikost datoteke zaporedja slik je vsaj nekaj desetkrat manjša. Hkrati večina naprav podpira strojno dekompresijo videa, tako da je poraba procesorja pri predvajanju videa zelo majhna, poraba baterije je prav tako zelo nizka, hitrost predvajanja pa je tudi hitra. Enostavno je mogoče doseči celo celozaslonsko predvajanje 25 sličic.
Načrt je dokončan in tu je več težav, ki jih je treba rešiti.
Celoten videoposnetek, vključno z nekaterimi predmeti v videoposnetku, se lahko odziva na uporabniške klike, diapozitive in druge operacije v napravi iPhone, lahko se predvaja v oknu, filtrira ozadje in se lahko uporablja kot slika PNG. Video nadomešča animacijo in nato podpira učinek maske v ozadju, ki lahko razkrije osnovno sliko, prav tako pa reši problem ročnega, samodejnega in nepopolnega zaslona
okno iphone
Rešitev: kombinirajte obdelavo prek platna in video oznak
Načelo: Pridobite izvirni slikovni okvir videoposnetka in ga potegnite na stran skozi kanale
Tukaj neposredno prilagam izvorno kodo, koda je napisana na splošno, vendar poudarja nekaj ključnih točk
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Video namesto animacije
To je nekoliko okorno. Biti mora interaktiven in povleči platno, da doseže namen nadzora slike. Vsega še nisem končal in tega splošne potrebe podjetja ne bodo imele. Tu je kratek opis, obdeluje ga tudi canvas + video, vendar je za predobdelavo potreben predpomnjeni vsebnik platna. S predhodno obdelavo dobite slikovne pike vsake slike in s spreminjanjem vrednosti vsake slikovne pike RBG lahko filtrira ozadje, tako da se lahko uporablja kot slika PNG. Napisal ga bom kasneje in objavil ~~
Naš drugi izdelek:
