Nedavno proučavamo upotrebu videa umjesto animacije i video umjesto sprite animacije. Ovu vrstu video nazivamo interaktivnim videom.
Tradicionalna sprite animacija: velik prostor na disku, sporo prenošenje, posebno mrežna reprodukcija, bit će sporije
Previše datoteka, previše http zahtjeva tijekom igranja na mreži, uzrokovat će spor odgovor ili abnormalno ponašanje. Stoga je hitno potrebno razviti skup tehnologija za zamjenu sprite animacije video. Ovu vrstu video nazivamo interaktivnim videom
Problemi s tradicionalnim video zapisom:
1. Može se igrati samo na području kvadratnog oblika
2. Ispod iPada je prozor za igranje, a pod iPhoneom se može reproducirati samo preko cijelog zaslona.
3. Kada igrate, sigurno će se pojaviti u prvom planu
Interaktivni video ima sljedeće značajke:
Pod iPhoneom reprodukcija preko cijelog zaslona nije potrebna, može se reproducirati na jednom području
Interaktivni video može se pojaviti ispod uobičajenih grafičkih objekata
Interaktivni video može imati masku, tako da se može ukloniti pozadina videozapisa i integrirati video i obični grafički objekti
Sažetak: Za video koji se koristi za reprodukciju postavit ćemo ga kao tradicionalni video. Za videozapise koje treba koristiti u određene svrhe postavili smo ih kao interaktivne videozapise. Istraživanje je dalo preliminarne rezultate. Inače, on sažima stvarne probleme s kojima će se u audio i video razvoju mobilnog H5 susretati u sljedećih nekoliko godina i nudi svoja rješenja. Pogledajte konačni stvarni efekt: kompatibilan s računalom (> IE9), iPhoneom, iPadom, Androidom 5.0
Riješite probleme ručnog, automatskog i prozora na iPhoneu, a to može u osnovi koristiti u stvarnoj proizvodnji. S desne strane je izvorna video datoteka mp4, video s lijeve strane zamjenjuje animaciju, a zatim podržava efekt pozadinske maske, može otkriti osnovnu kartu i podržava niz interaktivnih operacija
Zvuk H5
Svaki put kad audio objekt prođe kroz novi Audio, nova nit može se vidjeti na IOS-u.
Rješenje: Novi audio objekt zamjenom različitih zvučnih adresa postiže cilj da ne otvori više niti.
Podrška nije dobra na Androidu
Rješenje: Problem na donjoj verziji Androida nije riješen. Općenito, mješoviti razvoj može se riješiti podešavanjem osnovnog sučelja, poput fonegapa
Ne može se automatski reproducirati na iphoneu
Rješenje: Automatska reprodukcija na iphoneu postupak je koji je izveden kad je dizajniran IOS. Čini se da želi spriječiti automatsku krađu prometa.
Jednostavno rečeno, treba ga pokrenuti ručno simuliranjem korisnika, tako da ovaj dio koda moramo pozvati na samom početku:
Kopirajte kod
// Otklonite problem što preglednik ios ne može automatski reproducirati zvuk. Stvorite novi zvuk prilikom učitavanja i zamijenite src kada ga koristite.
Xut.fix = Xut.fix || {};
ako (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = netočno
var fixaudio = funkcija () {
if (! isAudio) {
isAudio = istina;
Xut.fix.audio = novi Audio ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Kopirajte gornji kod
Ako takav kôd vežete za tijelo: stvorite audio objekt ručnim pokretanjem, a zatim ga spremite u globalno
Kada se koristi na sljedeći način:
Kopirajte kod
// Ako koristite Xut.fix.audio za navođenje src-a za ios preglednik, uputite se na app.js za inicijalizaciju
if (Xut.fix.audio) {
zvučni
=
Xut.fix.audio;
audio.src = url;
} Else {
audio = novi Audio (url);
}
audio.autoigra = istina;
audio.play ();
Jednostavno zamijenite audio objekt. Jednostavno rečeno, to mora biti objekt stvoren od strane korisničkog okidača za reprodukciju.
H5 video zvuk
Video oznake mogu se rijetko koristiti na mobilnom terminalu, podrška za Android je loša, vizualno je bolja 5.0. Stari problem na iPhoneu ne može se reproducirati automatski (spremi podatke, spasi sestru !!!), a zadana je kontrola na cijelom zaslonu za reprodukciju. Dugo sam ignorirao ovu obradu video zapisa. Android koristi donji sloj, iPhone izravno koristi VideoJS, ugrađenu bljeskalicu i prekidač h5, bljeskalica također ima problema s podrškom. Prije nekog vremena, šef je imao zahtjev. Primijenili smo previše animacija, sve su to bile kombinirane animacije sprite ruta, u rasponu od stotina megabajta do stotina megabajta u jednoj aplikaciji, pa je hitno potrebno rješenje za komprimiranje slika. Konačno rješenje je korištenje videozapisa umjesto animacije, jer je tehnologija kompresije videozapisa razvijena već dugi niz godina i vrlo je zrela. Sada tehnologija kompresije video zapisa može lako pretvoriti 720P. Filmovi visoke razlučivosti, komprimirani na 10M / min ili 160K / sec. Veličina datoteke slikovnog niza je najmanje nekoliko desetaka puta manja. Istodobno, većina uređaja podržava hardversku dekompresiju video zapisa, tako da je potrošnja CPU-a za reprodukciju videozapisa vrlo niska, potrošnja baterije također vrlo mala, a brzina reprodukcije također brza. Čak se i reprodukcija od 25 sličica na cijelom zaslonu može lako postići.
Plan je finaliziran, a ovdje je nekoliko problema koje treba riješiti.
Cijeli videozapis, uključujući neke objekte u videozapisu, može reagirati na klikove korisnika, slajdove i druge radnje pod iPhoneom, može se reproducirati u prozoru, može filtrirati pozadinu i može se koristiti poput PNG slike. Video zamjenjuje animaciju, a zatim podržava efekt pozadinske maske, koji može otkriti osnovnu sliku, a također rješava problem ručnog, automatskog i nepotpunog zaslona
otvaranje iphone prozora
Rješenje: Kombinirajte obradu putem platna + video oznaka
Načelo: Nabavite originalni okvir slike videozapisa i nacrtajte ga na stranicu kroz kanale
Ovdje izravno prilažem izvorni kod, kôd je napisan općenito, ali ističe nekoliko ključnih točaka
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Video umjesto animacije
Ovo je pomalo nezgrapno. Potrebno je biti interaktivno i povući platno da bi se postigla svrha kontrole slike. Još nisam sve napisao, a opće potrebe tvrtke to neće imati. Evo kratkog opisa, obrađuje ga i canvas + video, no za predobradu je potreban predmemorirani spremnik platna. Kroz predobradu dobijte piksele svake slike, a promjenom vrijednosti svakog piksela RBG može filtrirati pozadinu tako da se može koristiti kao PNG slika. Napisat ću to kasnije i objaviti ~~
Naš drugi proizvod:
