V poslední době studujeme použití videa místo animace a videa místo animace sprite. Tento druh videa nazýváme interaktivní video.
Tradiční animace sprite: velký prostor na disku, pomalé stahování, zejména online přehrávání, bude pomalejší
Příliš mnoho souborů, příliš mnoho požadavků HTTP při hraní online způsobí pomalou odezvu nebo neobvyklé chování. Proto je naléhavě nutné vyvinout soubor technologií, které by nahradily animaci sprite videem. Tento druh videa nazýváme interaktivní video
Problémy s tradičním videem:
1. Lze hrát pouze v oblasti čtvercového tvaru
2. Pod iPadem je to okno, které se hraje, a pod iPhonem jej lze přehrávat pouze na celou obrazovku.
3. Při hraní se určitě objeví v popředí
Interaktivní video má následující vlastnosti:
U iPhonu není přehrávání na celou obrazovku vyžadováno, lze jej přehrávat v jedné oblasti
Interaktivní video se může objevit pod běžnými grafickými objekty
Interaktivní video může mít masku, takže lze odstranit pozadí videa a integrovat video a běžné grafické objekty
Shrnutí: U videa používaného k přehrávání jej nastavíme jako tradiční video. U videí, která je třeba použít ke konkrétním účelům, je nastavíme jako interaktivní videa. Výzkum přinesl předběžné výsledky. Mimochodem, shrnuje skutečné problémy, s nimiž se setkáme při vývoji zvuku a videa mobilní H5 v příštích několika letech, a poskytuje vlastní řešení. Podívejte se na konečný skutečný efekt: kompatibilní s PC (> IE9), iphone, ipad, Android 5.0
Vyřešte problémy manuálního, automatického a vytváření oken v iPhonu a můžete v zásadě se používají ve skutečné výrobě. Vpravo je původní soubor videa mp4, video vlevo nahrazuje animaci a poté podporuje efekt masky pozadí, může odhalit základní mapu a podporuje řadu interaktivních operací
Zvuk H5
Pokaždé, když je zvukový objekt předán novým zvukem, lze v systému IOS vidět nové vlákno.
Řešení: Nový zvukový objekt nahrazením různých zvukových adres dosáhne cíle neotevřít více vláken.
Podpora není v systému Android dobrá
Řešení: Problém s nižší verzí systému Android není vyřešen. Obecně lze smíšený vývoj zvládnout úpravou základního rozhraní, například phonegap
Na iPhonu nelze automaticky hrát
Řešení: Automatické přehrávání na iPhonu je proces prováděný, když byl navržen IOS. Zdá se, že brání automatické krádeži provozu.
Jednoduše řečeno, je třeba jej spustit ručně simulací uživatele, takže musíme tento kousek kódu zavolat na samém začátku:
Zkopírujte kód
// Opravte problém, že prohlížeč ios nemůže automaticky přehrávat zvuk. Při načítání vytvořte nový zvuk a při jeho použití nahraďte src.
Xut.fix = Xut.fix || {};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = false
var fixaudio = funkce () {
if (! isAudio) {
isAudio = true;
Xut.fix.audio = nový zvuk ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Zkopírujte výše uvedený kód
Pokud takový kód svážete s tělem: vytvořte zvukový objekt ručním spuštěním a poté jej uložte do globálního
Při následujícím použití:
Zkopírujte kód
// Pokud používáte Xut.fix.audio k určení src pro prohlížeč ios, viz inicializace v app.js
if (Xut.fix.audio) {
audio
=
Xut.fix.audio;
audio.src = url;
} Else {
audio = nový zvuk (url);
}
audio.autoplay = true;
audio.play ();
Jednoduše nahraďte zvukový objekt. Jednoduše řečeno, musí to být objekt vytvořený spouštěčem uživatele, který se má přehrát.
Zvuk videa H5
Značky videa se na mobilním terminálu mohou používat jen zřídka, podpora Androidu je příliš špatná, vizuálně 5.0 je lepší. Starý problém na iPhonu nelze přehrát automaticky (Uložit data, uložit vaši sestru !!!) a výchozím nastavením je ovládání na celou obrazovku. Po dlouhou dobu jsem toto zpracování videa ignoroval. Android používá spodní vrstvu, iPhone přímo používá VideoJS, vestavěný blesk a přepínač h5, flash má také problémy s podporou. Před chvílí měl šéf poptávku. Použili jsme příliš mnoho animací, všechny byly kombinované animace sprite tras, od stovek megabajtů po stovky megabajtů v jedné aplikaci, takže je naléhavě potřeba řešení pro kompresi obrázků. Konečným řešením je použití videa místo animace, protože technologie komprese videa byla vyvinuta po mnoho let a byla velmi vyspělá. Nyní může technologie komprese videa snadno převést 720P. Filmy ve vysokém rozlišení komprimované na 10 M / min nebo 160 K / s. Velikost souboru sekvence obrázků je alespoň několik desítekkrát menší. Většina zařízení současně podporuje hardwarovou dekompresi videa, takže spotřeba procesoru při přehrávání videa je velmi nízká, spotřeba baterie je také velmi nízká a rychlost přehrávání je také vysoká. Lze snadno dosáhnout i přehrávání 25 snímků na celou obrazovku.
Plán je dokončen a je zde několik problémů, které je třeba vyřešit.
Celé video, včetně některých objektů ve videu, může reagovat na kliknutí uživatelů, diapozitivy a další operace pod iPhone, lze je přehrát v okně, odfiltrovat pozadí a lze je použít jako obrázek PNG. Video nahradí animaci a poté podporuje efekt masky pozadí, který může odhalit základní obraz, a také řeší problém manuální, automatické a neúplné obrazovky
okna pro iPhone
Řešení: Kombinujte zpracování pomocí značek plátna + videa
Princip: Získejte původní obrazový rámeček videa a nakreslete jej na stránku pomocí canavů
Zde přímo připojuji zdrojový kód, kód je psán obecně, ale zdůrazňuje několik klíčových bodů
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Video místo animace
To je trochu těžkopádné. Musí být interaktivní a táhnout plátno, aby bylo dosaženo účelu ovládání obrazu. Ještě jsem to nedokončil a obecné potřeby společnosti to mít nebudou. Zde je stručný popis, zpracovává se také pomocí canvas + video, ale k provedení předběžného zpracování je nutný kontejner plátna v mezipaměti. Prostřednictvím předzpracování získáte pixely každého obrázku a změnou hodnoty každého pixelu RBG může odfiltrovat pozadí, takže jej lze použít jako obrázek PNG. Napíšu to později a zveřejním ~ ~
Náš další produkt:
