Recent, studiem utilizarea video în loc de animație și video în loc de animație sprite. Noi numim acest tip de videoclip interactiv.
Animație sprite tradițională: spațiu mare pe disc, descărcare lentă, în special redarea online, va fi mai lentă
Prea multe fișiere, prea multe solicitări http atunci când joci online, vor provoca un răspuns lent sau un comportament anormal. Prin urmare, este urgent să se dezvolte un set de tehnologii care să înlocuiască animația sprite cu video. Numim acest tip de videoclip un videoclip interactiv
Probleme cu videoclipurile tradiționale:
1. Poate fi jucat doar într-o zonă pătrată
2. Sub iPad, este o fereastră de redat, iar sub iPhone, poate fi redat doar pe ecran complet.
3. Când joci, acesta va apărea cu siguranță în prim-plan
Videoclipul interactiv are următoarele caracteristici:
Sub iPhone, redarea pe ecran complet nu este necesară, poate fi redată într-o singură zonă
Videoclipurile interactive pot apărea sub obiecte grafice obișnuite
Videoclipul interactiv poate avea o mască, astfel încât fundalul videoclipului să poată fi îndepărtat și să poată fi integrate video și obiecte grafice obișnuite
Rezumat: Pentru videoclipul folosit pentru redare, îl vom seta ca un videoclip tradițional. Pentru videoclipurile care trebuie utilizate în scopuri specifice, le setăm ca videoclipuri interactive. Cercetarea a dat rezultate preliminare. Apropo, rezumă problemele reale întâmpinate în dezvoltarea audio și video a dispozitivului mobil H5 în următorii câțiva ani și oferă propriile sale soluții. Aruncați o privire asupra efectului final final: compatibil cu PC (> IE9), iphone, ipad, Android 5.0
Rezolvați problemele legate de manual, automat și de fereastră pe iPhone, și poate practic să fie utilizate în producția reală. În dreapta este fișierul video mp4 original, videoclipul din stânga înlocuiește animația și apoi acceptă efectul de mască de fundal, poate dezvălui harta de bază și acceptă o serie de operații interactive
Audio H5
De fiecare dată când un obiect audio este trecut printr-un nou audio, un nou fir poate fi văzut pe IOS.
Soluție: Un nou obiect audio, prin înlocuirea diferitelor adrese audio, atinge obiectivul de a nu deschide mai multe fire.
Asistența nu este bună pe Android
Soluție: problema de pe versiunea inferioară a Android nu este rezolvată. În general, dezvoltarea mixtă poate fi gestionată prin ajustarea interfeței subiacente, cum ar fi phonegap
Nu se poate reda automat pe iPhone
Soluție: Redarea automată pe iPhone este un proces realizat când IOS a fost proiectat. Se pare că previne furtul automat al traficului.
Pur și simplu, trebuie să fie declanșat manual prin simularea utilizatorului, așa că trebuie să apelăm această bucată de cod chiar de la început:
Copiați codul
// Remediați problema că browserul iOS nu poate reda automat sunetul. Creați un sunet nou la încărcare și înlocuiți src atunci când îl utilizați.
Xut.fix = Xut.fix || {};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = false
var fixaudio = function () {
if (! isAudio) {
isAudio = adevărat;
Xut.fix.audio = new Audio ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Copiați codul de mai sus
Dacă legați un astfel de cod de corp: creați un obiect audio declanșându-l manual, apoi salvați-l în global
Când se utilizează după cum urmează:
Copiați codul
// Dacă utilizați Xut.fix.audio pentru a specifica src pentru browserul iOS, vă rugăm să consultați app.js pentru inițializare
if (Xut.fix.audio) {
audio
=
Xut.fix.audio;
audio.src = url;
} Else {
audio = audio nou (url);
}
audio.autoplay = adevărat;
audio.play ();
Pur și simplu înlocuiți obiectul audio. Pur și simplu, trebuie să fie obiectul creat de declanșatorul utilizatorului pentru a juca.
Audio video H5
Etichetele video pot fi rareori folosite pe terminalul mobil, suportul Android este prea rău, vizual 5.0 este mai bun. Vechea problemă de pe iPhone nu poate fi redată automat (Salvați datele, salvați-o pe sora dvs. !!!), iar setarea implicită este controlul pe ecran complet pentru redare. Pentru o lungă perioadă de timp, am ignorat această procesare video. Android folosește stratul inferior, iPhone-ul folosește direct VideoJS, blițul încorporat și comutatorul h5, blițul are și probleme de suport. Cu ceva timp în urmă, șeful avea o cerere. Am aplicat prea multe animații, toate acestea fiind animații combinate de rute sprite, variind de la sute de megabyți la sute de megabyți într-o singură aplicație, deci este urgentă o soluție pentru comprimarea imaginilor. Soluția finală este utilizarea video în loc de animație, deoarece tehnologia de compresie video a fost dezvoltată de mulți ani și a fost foarte matură. Acum tehnologia de compresie video poate converti cu ușurință 720P. Filme de înaltă definiție, comprimate la 10M / min sau 160K / sec. Dimensiunea fișierului secvenței de imagine este de cel puțin câteva zeci de ori mai mică. În același timp, majoritatea dispozitivelor acceptă decompresia hardware a videoclipurilor, astfel încât consumul procesorului de redare video este foarte scăzut, consumul bateriei este, de asemenea, foarte scăzut, iar viteza de redare este, de asemenea, rapidă. Chiar și redarea pe ecran complet a 25 de cadre poate fi realizată cu ușurință.
Planul este finalizat, iar mai multe probleme de rezolvat sunt aici.
Întregul videoclip, inclusiv unele obiecte din videoclip, poate răspunde la clicurile utilizatorului, diapozitivele și alte operații de pe iPhone, poate fi redat într-o fereastră, poate filtra fundalul și poate fi folosit ca o imagine PNG. Videoclipul înlocuiește animația și apoi acceptă efectul de mască de fundal, care poate dezvălui imaginea de bază și, de asemenea, rezolvă problema ecranului manual, automat și incomplet
fereastră iPhone
Soluție: combinați procesarea prin pânză + etichete video
Principiu: obțineți rama de imagine originală a videoclipului și trageți-o pe pagină prin canavs
Aici atașez direct codul sursă, codul este scris în general, dar evidențiază câteva puncte cheie
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Video în loc de animație
Este cam greoi. Trebuie să fie interactiv și să trageți pânza pentru a atinge scopul controlului imaginii. Încă nu am terminat de scris totul, iar nevoile generale ale companiei nu vor avea acest lucru. Iată o scurtă descriere, este procesată și de pânză + video, dar este necesar un container de pânză cache pentru a face o preprocesare. Prin preprocesare, obțineți pixelii fiecărei imagini și, schimbând valoarea fiecărui pixel RBG, poate filtra fundalul, astfel încât să poată fi folosit ca o imagine PNG. O voi scrie mai târziu și o voi publica ~~
alt produs nostru:
