V poslednej dobe študujeme použitie videa namiesto animácie a videa namiesto animácie Sprite. Tento druh videa nazývame interaktívne video.
Tradičná animovaná animácia: veľká disková plocha, pomalé sťahovanie, najmä online prehrávanie, bude pomalšie
Príliš veľa súborov, príliš veľa požiadaviek HTTP pri hraní online spôsobí pomalú odozvu alebo neobvyklé správanie. Preto je naliehavo potrebné vyvinúť súbor technológií, ktoré nahradia animovanú animáciu videom. Tento druh videa nazývame interaktívne video
Problémy s tradičným videom:
1. Dá sa hrať iba na ploche štvorcového tvaru
2. Pod iPadom je to okno na hranie a pod iPhone sa dá prehrať iba na celú obrazovku.
3. Pri hraní sa určite objaví v popredí
Interaktívne video má nasledujúce vlastnosti:
Pod telefónom iPhone nie je potrebné prehrávanie na celú obrazovku, dá sa prehrať v jednej oblasti
Interaktívne video sa môže zobraziť pod bežnými grafickými objektmi
Interaktívne video môže mať masku, takže je možné odstrániť pozadie videa a integrovať video a bežné grafické objekty
Zhrnutie: Pre video používané na prehrávanie ho nastavíme ako tradičné video. Pre videá, ktoré je potrebné použiť na konkrétne účely, ich nastavíme ako interaktívne videá. Výskum priniesol predbežné výsledky. Mimochodom, sumarizuje skutočné problémy, s ktorými sa stretnú vo vývoji zvuku a videa mobilnej H5 v nasledujúcich rokoch, a poskytuje vlastné riešenia. Zoznámte sa s konečným skutočným efektom: kompatibilný s PC (> IE9), iphone, ipad, Android 5.0
Vyriešte problémy s manuálnym, automatickým a vytváraním okien na iPhone a môžete v zásade sa používajú pri skutočnej výrobe. Vpravo je pôvodný súbor videa mp4, video vľavo nahrádza animáciu a potom podporuje efekt masky pozadia, dokáže odhaliť základnú mapu a podporuje celý rad interaktívnych operácií.
Zvuk H5
Zakaždým, keď zvukový objekt prechádza novým zvukom, v systéme IOS je možné vidieť nové vlákno.
Riešenie: Nový zvukový objekt nahradením rôznych zvukových adries dosahuje cieľ neotvárania ďalších vlákien.
Podpora nie je v systéme Android dobrá
Riešenie: Problém s nižšou verziou systému Android nie je vyriešený. Zmiešaný vývoj sa dá vo všeobecnosti vyriešiť úpravou základného rozhrania, napríklad phonegap
Na iphone sa nedá automaticky prehrať
Riešenie: Automatické prehrávanie na iPhone je proces, ktorý sa uskutočnil, keď bol navrhnutý IOS. Zdá sa, že to má zabrániť automatickému krádeži premávky.
Jednoducho povedané, je potrebné ho spustiť manuálne simuláciou používateľa, takže tento kúsok kódu musíme zavolať na samom začiatku:
Skopírujte kód
// Vyriešte problém, že prehliadač ios nemôže automaticky prehrávať zvuk. Pri načítaní vytvorte nový zvuk a pri jeho použití nahraďte src.
Xut.fix = Xut.fix || {};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = nepravda
var fixaudio = funkcia () {
if (! isAudio) {
isAudio = pravda;
Xut.fix.audio = nový zvuk ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Skopírujte kód uvedený vyššie
Ak taký kód naviažete na telo: vytvorte zvukový objekt manuálnym spustením a potom ho uložte do globálneho formátu
Pri nasledujúcom použití:
Skopírujte kód
// Ak používate Xut.fix.audio na zadanie src pre ios prehliadač, inicializáciu nájdete v app.js
if (Xut.fix.audio) {
audio
=
Xut.fix.audio;
audio.src = url;
} Else {
zvuk = nový zvuk (adresa URL);
}
audio.autoplay = true;
audio.play ();
Jednoducho vymeňte zvukový objekt. Zjednodušene povedané, na prehrávanie musí ísť o objekt vytvorený spúšťačom používateľa.
Zvuk videa H5
Značky videa sa na mobilnom termináli môžu používať len zriedka, podpora systému Android je príliš zlá, vizuálne je verzia 5.0 lepšia. Starý problém v iPhone sa nedá prehrať automaticky (Uložiť údaje, uložiť svoju sestru !!!) a predvolene je možné ich prehrať na celej obrazovke. Toto spracovanie videa som dlho ignoroval. Android používa spodnú vrstvu, iPhone priamo používa VideoJS, zabudovaný blesk a prepínač h5, problémy s podporou má aj blesk. Pred časom mal šéf dopyt. Použili sme príliš veľa animácií. Všetky boli kombináciou animácií sprite trasy, ktoré sa pohybovali od stoviek megabajtov po stovky megabajtov v jednej aplikácii, takže je naliehavo potrebné nájsť riešenie na kompresiu obrázkov. Konečným riešením je použitie videa namiesto animácie, pretože technológia kompresie videa bola vyvinutá mnoho rokov a bola veľmi vyspelá. Teraz môže technológia kompresie videa ľahko konvertovať 720P. Filmy vo vysokom rozlíšení komprimované na 10 M / min alebo 160 K / s. Veľkosť súboru obrazovej sekvencie je najmenej niekoľkonásobne menšia. Väčšina zariadení súčasne podporuje hardvérovú dekompresiu videa, takže spotreba procesora pri prehrávaní videa je veľmi nízka, spotreba batérie je tiež veľmi nízka a rýchlosť prehrávania je tiež rýchla. Ľahko sa dá dosiahnuť aj prehrávanie 25 snímok na celej obrazovke.
Plán je dokončený a je tu niekoľko problémov, ktoré treba vyriešiť.
Celé video vrátane niektorých objektov vo videu dokáže reagovať na kliknutia, snímky a iné operácie používateľa v iPhone, dá sa prehrať v okne, odfiltrovať pozadie a použiť ho ako obrázok PNG. Video nahradzuje animáciu a potom podporuje efekt masky pozadia, ktorý dokáže odhaliť základný obrázok, a tiež rieši problém manuálnej, automatickej a neúplnej obrazovky
okná pre iphone
Riešenie: Kombinujte spracovanie prostredníctvom plátna + značiek videa
Princíp: Získajte pôvodný obrazový rám videa a nakreslite ho na stránku pomocou súborov canavs
Tu priamo pripojím zdrojový kód, kód je napísaný všeobecne, ale zvýrazňuje niekoľko kľúčových bodov
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Video namiesto animácie
To je trochu ťažkopádne. Musí to byť interaktívne a pretiahnuť plátno, aby ste dosiahli účel ovládania obrázka. Ešte som nedopísal všetko a všeobecné potreby spoločnosti toto nebudú mať. Tu je krátky popis, je tiež spracovaný programom canvas + video, ale na predspracovanie je potrebný kontajnerový plátno. Predbežným spracovaním získate pixely každého obrázka a zmenou hodnoty každého pixelu RBG dokáže odfiltrovať pozadie, aby ho bolo možné použiť ako obrázok PNG. Napíšem to neskôr a zverejním ~~
Náš ďalší produkt:
