Nemrégiben az animáció helyett a videó, a sprite animáció helyett pedig a video használatát tanulmányozzuk. Ezt a fajta videót interaktív videónak hívjuk.
Hagyományos sprite animáció: a nagy lemezterület, a lassú letöltés, különösen az online lejátszás, lassabb lesz
Túl sok fájl, túl sok http-kérés online lejátszáskor lassú választ vagy rendellenes viselkedést okoz. Ezért sürgősen ki kell dolgozni egy olyan technológiát, amely a sprite animációt videóval helyettesíti. Ezt a fajta videót interaktív videónak hívjuk
Problémák a hagyományos videóval:
1. Csak négyzet alakú területen játszható
2. Az iPad alatt egy játékablak, az iPhone alatt pedig csak teljes képernyőn lehet lejátszani.
3. Játék közben mindenképpen az élen jelenik meg
Az interaktív videó a következő jellemzőkkel rendelkezik:
Az iPhone alatt teljes képernyős lejátszás nem szükséges, egy területen játszható le
Interaktív videó jelenhet meg a hétköznapi grafikai objektumok alatt
Az interaktív videó tartalmazhat maszkot, így a videó háttere eltávolítható, a videó és a közönséges grafikai objektumok pedig integrálhatók
Összefoglaló: A lejátszáshoz használt videóhoz hagyományos videót állítunk be. A meghatározott célokra felhasználandó videók esetében interaktív videókként állítjuk be őket. A kutatás előzetes eredményeket hozott. Egyébként összefoglalja az elkövetkező néhány évben a mobil H5 audio és video fejlesztése során felmerült tényleges problémákat, és saját megoldásokat kínál. Vessen egy pillantást a tényleges tényleges hatásra: kompatibilis a PC-vel (> IE9), az iphone-val, az iPad-del, az Android 5.0-val
Oldja meg az iPhone kézi, automatikus és ablakos problémáit, és megteheti alapvetően a tényleges termelésben használhatók fel. A jobb oldalon található az eredeti video mp4 fájl, a bal oldali videó felváltja az animációt, majd támogatja a háttérmaszk hatást, felfedheti az alaptérképet és számos interaktív műveletet támogat
H5 hang
Valahányszor egy audioobjektum átkerül az új Audión, új szál látható az IOS-on.
Megoldás: Egy új audioobjektum a különböző audio címek cseréjével eléri azt a célt, hogy ne nyisson több szálat.
A támogatás nem jó az Android rendszeren
Megoldás: Az Android alsó verziójának problémája nincs megoldva. Általában a vegyes fejlesztés kezelhető az alapul szolgáló felület, például a phonegap beállításával
Nem lehet automatikusan lejátszani az iphone-on
Megoldás: Az automatikus lejátszás az iphone-on az IOS megtervezésekor végrehajtott folyamat. Úgy tűnik, hogy megakadályozza a forgalom automatikus lopását.
Egyszerűen fogalmazva, manuálisan kell elindítani a felhasználó szimulálásával, ezért ezt a kóddarabot már a legelején meg kell hívnunk:
Másolja a kódot
// Javítsa ki azt a problémát, hogy az ios böngésző nem tudja automatikusan lejátszani a hangot. Hozzon létre új hangot betöltéskor, és használja az src-t.
Xut.fix = Xut.fix || {};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = hamis
var fixaudio = function () {
if (! isAudio) {
isAudio = igaz;
Xut.fix.audio = new Audio ();
document.removeEventListener ('touchstart', fixaudio, hamis);
}
};
document.addEventListener ('touchstart', fixaudio, hamis);
}
Másolja a fenti kódot
Ha ilyen kódot köt a törzshöz: hozzon létre egy audioobjektumot manuálisan aktiválva, majd mentse a globálisba
Az alábbiak szerint alkalmazva:
Másolja a kódot
// Ha az Xut.fix.audio fájlt használja az src megadásához az ios böngészőhöz, kérjük, olvassa el az app.js fájlt
if (Xut.fix.audio) {
hang-
=
Xut.fix.audio;
audio.src = url;
} Else {
audio = new Audio (url);
}
audio.autoplay = igaz;
audio.play ();
Egyszerűen cserélje ki az audio objektumot. Egyszerűen fogalmazva, annak a felhasználó által létrehozott objektumnak kell lennie a lejátszáshoz.
H5 video hang
A videotageket ritkán lehet használni a mobil terminálon, az Android támogatása túl rossz, vizuálisan az 5.0 jobb. Az iPhone régi problémája nem játszható le automatikusan (Adatok mentése, nővérének mentése !!!), az alapértelmezett beállítás pedig a teljes képernyős vezérlés. Sokáig nem vettem figyelembe ezt a videofeldolgozást. Az Android az alsó réteget használja, az iPhone közvetlenül a VideoJS-t használja, a beépített vakut és a h5 kapcsolót, a vakunak is vannak támogatási problémái. Nem sokkal ezelőtt a főnöknek volt igénye. Túl sok animációt alkalmaztunk, ezek mind sprite útvonalak kombinált animációi voltak, a megabájtok százától a megabájtokig terjedtek egy alkalmazás alatt, ezért sürgősen szükség van egy megoldásra a képek tömörítésére. A végső megoldás az, hogy az animáció helyett a videót használjuk, mert a videotömörítési technológiát hosszú évek óta fejlesztik és nagyon kiforrott. Most a videotömörítési technológia könnyen átalakíthatja a 720P-t. Nagyfelbontású filmek, 10M / perc vagy 160K / sec sebességre tömörítve. A képsorozat fájlmérete legalább több tízszer kisebb. Ugyanakkor a legtöbb eszköz támogatja a videó hardveres dekompresszióját, így a videólejátszás CPU-fogyasztása nagyon alacsony, az akkumulátor-fogyasztás is nagyon alacsony, és a lejátszási sebesség is gyors. Még 25 képkocka teljes képernyős lejátszása is könnyen elérhető.
A terv elkészült, és itt több megoldandó probléma van.
A teljes videó, beleértve a videó egyes objektumait, reagálhat a felhasználó kattintásaira, diáira és egyéb műveleteire az iPhone alatt, lejátszható egy ablakban, kiszűrheti a hátteret, és PNG-képként használható. A videó felváltja az animációt, majd támogatja a háttérmaszk hatást, amely felfedheti az alapképet, és megoldja a kézi, automatikus és hiányos képernyő problémáját is
iphone ablakos
Megoldás: Kombinálja a feldolgozást vászon + videocímkék segítségével
Alapelv: Szerezd meg a videó eredeti képkeretét, és rajzold át az oldalra a barlangokon keresztül
Itt közvetlenül csatolom a forráskódot, a kód általában meg van írva, de kiemel néhány kulcsfontosságú pontot
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Videó animáció helyett
Ez kissé nehézkes. Interaktívnak kell lennie, és a vásznat húzva el kell érnie a kép vezérlésének célját. Még nem fejeztem be az egészet, és az általános vállalati igényeknek ez nem lesz meg. Itt van egy rövid leírás, a vászon + videó is feldolgozza, de az előfeldolgozáshoz gyorsítótárazott vászontároló szükséges. Az előfeldolgozás révén szerezzen be minden kép képpontját, és az egyes pixelek RBG értékének megváltoztatásával kiszűrheti a hátteret, így PNG-képként használható. Később megírom és közzéteszem ~~
Másik termék:
