Nylig studerer vi bruken av video i stedet for animasjon og video i stedet for sprite-animasjon. Vi kaller denne typen video interaktiv video.
Tradisjonell sprite-animasjon: stor diskplass, langsom nedlasting, spesielt online avspilling, vil være tregere
For mange filer, for mange http-forespørsler når du spiller online, vil forårsake treg respons eller unormal oppførsel. Derfor er det et presserende behov for å utvikle et sett med teknologi for å erstatte sprite-animasjon med video. Vi kaller denne typen video for en interaktiv video
Problemer med tradisjonell video:
1. Kan bare spilles i et firkantet område
2. Under iPad er det et vindu å spille, og under iPhone kan det bare spilles i full skjerm.
3. Når du spiller, vil det definitivt vises i forkant
Interaktiv video har følgende egenskaper:
Under iPhone er ikke fullskjermavspilling nødvendig, den kan spilles i ett område
Interaktiv video kan vises under vanlige grafiske objekter
Interaktiv video kan ha en maske, slik at bakgrunnen til videoen kan fjernes og videoen og vanlige grafiske objekter kan integreres
Sammendrag: For videoen som brukes til å spille, vil vi sette den som en tradisjonell video. For videoer som må brukes til bestemte formål, setter vi dem som interaktive videoer. Forskningen har gitt foreløpige resultater. For øvrig oppsummerer den de faktiske problemene som har oppstått i lyd- og videoutviklingen til den mobile H5 de neste årene og gir sine egne løsninger. Ta en titt på den endelige faktiske effekten: kompatibel med PC (> IE9), iphone, ipad, Android 5.0
Løs problemene med manuell, automatisk og vindusvindu på iPhone, og det kan det i utgangspunktet brukes i faktisk produksjon. Til høyre er den originale video mp4-filen, videoen til venstre erstatter animasjonen, og støtter deretter bakgrunnsmaskeeffekten, kan avsløre basiskartet og støtter en rekke interaktive operasjoner
H5-lyd
Hver gang et lydobjekt sendes gjennom ny lyd, kan du se en ny tråd på IOS.
Løsning: Et nytt lydobjekt, ved å erstatte forskjellige lydadresser, oppnår målet om ikke å åpne flere tråder.
Støtte er ikke bra på Android
Løsning: Problemet i den nedre versjonen av Android er ikke løst. Generelt kan blandet utvikling håndteres ved å justere det underliggende grensesnittet, for eksempel phonegap
Kan ikke spille automatisk på iPhone
Løsning: Automatisk avspilling på iPhone er en prosess som ble gjort da IOS ble designet. Det ser ut til å være for å forhindre automatisk tyveri av trafikk.
Enkelt sagt, det må utløses manuelt ved å simulere brukeren, så vi må ringe denne koden helt i begynnelsen:
Kopier kode
// Løs problemet at iOS-nettleseren ikke kan spille av lyd automatisk. Opprett ny lyd når du laster inn og erstatt src når du bruker den.
Xut.fix = Xut.fix || {};
hvis (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = falsk
var fixaudio = funksjon () {
hvis (! isAudio) {
isAudio = sant;
Xut.fix.audio = ny lyd ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Kopier koden ovenfor
Hvis du binder en slik kode til kroppen: Lag et lydobjekt ved å utløse det manuelt, og lagre det i det globale
Når det brukes som følger:
Kopier kode
// Hvis du bruker Xut.fix.audio til å spesifisere src for iOS-nettleseren, kan du se app.js for initialisering
hvis (Xut.fix.audio) {
lyd
=
Xut.fix.audio;
audio.src = url;
} Else {
lyd = ny lyd (url);
}
audio.autoplay = sant;
audio.play ();
Bare bytt ut lydobjektet. Enkelt sagt, det må være objektet som er opprettet av brukerutløseren for å spille.
H5-videolyd
Videokoder kan sjelden brukes på mobilterminalen, Android-støtte er for dårlig, visuelt er 5.0 bedre. Det gamle problemet på iPhone kan ikke spilles av automatisk (Lagre data, lagre søsteren din !!!), og standard er fullskjermkontroll for å spille. I lang tid ignorerte jeg denne videobehandlingen. Android bruker det nederste laget, iPhone bruker direkte VideoJS, den innebygde blitsen og h5-bryteren, blits har også støtteproblemer. For en stund siden hadde sjefen et krav. Vi brukte for mange animasjoner, alle var kombinerte animasjoner av sprite-ruter, alt fra hundrevis av megabyte til hundrevis av megabyte under en app, så det er et presserende behov for en løsning for å komprimere bilder. Den endelige løsningen er å bruke video i stedet for animasjon, fordi videokomprimeringsteknologi har blitt utviklet i mange år og har vært veldig moden. Nå kan videokomprimeringsteknologi enkelt konvertere 720P. HD-filmer, komprimert til 10M / min eller 160K / sek. Filstørrelsen på bildesekvensen er minst flere titalls ganger mindre. Samtidig støtter de fleste enheter maskinvaredekomprimering av video, slik at CPU-forbruket av videoavspilling er veldig lavt, batteriforbruket er også veldig lavt, og avspillingshastigheten er også rask. Selv fullskjermavspilling på 25 bilder kan enkelt oppnås.
Planen er ferdig, og flere problemer som skal løses er her.
Hele videoen, inkludert noen objekter i videoen, kan svare på brukerklikk, lysbilder og andre operasjoner under iPhone, kan spilles av i et vindu, kan filtrere ut bakgrunnen og kan brukes som et PNG-bilde. Videoen erstatter animasjonen, og støtter deretter bakgrunnsmaskeeffekten, som kan avsløre basisbildet, og som også løser problemet med manuell, automatisk og ufullstendig skjerm
iPhone vindu
Løsning: Kombiner prosessering gjennom canvas + videokoder
Prinsipp: Få den originale bilderammen til videoen og trekk den til siden gjennom kanavs
Her legger jeg direkte til kildekoden, koden er skrevet generelt, men fremhever noen få viktige punkter
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Video i stedet for animasjon
Dette er litt tungvint. Det må være interaktivt og dra lerretet for å oppnå formålet med å kontrollere bildet. Jeg er ikke ferdig med å skrive det hele ennå, og generelle bedriftsbehov vil ikke ha dette. Her er en kort beskrivelse, den behandles også av canvas + video, men en bufret canvas-container er nødvendig for å gjøre en forhåndsbehandling. Gjennom forhåndsbehandling får du pikslene til hvert bilde, og ved å endre verdien på hver piksel RBG, kan den filtrere ut bakgrunnen, slik at den kan brukes som et PNG-bilde. Jeg vil skrive det senere og publisere det ~~
Vår andre produkt:
