For nylig studerer vi brugen af video i stedet for animation og video i stedet for sprite-animation. Vi kalder denne form for video interaktiv video.
Traditionel sprite-animation: stor diskplads, langsom download, især online-afspilning, vil være langsommere
For mange filer, for mange http-anmodninger, når du spiller online, vil forårsage langsom respons eller unormal adfærd. Derfor er der et presserende behov for at udvikle et sæt teknologi til at erstatte sprite-animation med video. Vi kalder denne form for video for en interaktiv video
Problemer med traditionel video:
1. Kan kun spilles i et firkantet område
2. Under iPad er det et vindue til at spille, og under iPhone kan det kun afspilles i fuld skærm.
3. Når du spiller, vil den helt sikkert fremstå i front
Interaktiv video har følgende egenskaber:
Under iPhone er fuldskærms afspilning ikke påkrævet, den kan afspilles i ét område
Interaktiv video kan vises under almindelige grafiske objekter
Interaktiv video kan have en maske, så baggrunden for videoen kan fjernes, og videoen og almindelige grafiske objekter kan integreres
Sammendrag: For den video, der bruges til afspilning, vil vi indstille den som en traditionel video. For videoer, der skal bruges til specifikke formål, indstiller vi dem som interaktive videoer. Forskningen har givet foreløbige resultater. Den opsummerer i øvrigt de faktiske problemer, man støder på i lyd- og videoudviklingen af den mobile H5 i de næste par år og giver sine egne løsninger. Tag et kig på den endelige faktiske effekt: kompatibel med pc (>IE9), iphone, ipad, Android 5.0
Løs problemerne med manuel, automatisk og vinduesvisning på iPhone, og det kan som udgangspunkt bruges i egentlig produktion. Til højre er den originale video mp4-fil, videoen til venstre erstatter animationen og understøtter derefter baggrundsmaskeeffekten, kan afsløre basiskortet og understøtter en række interaktive operationer
H5 lyd
Hver gang et lydobjekt føres gennem ny lyd, kan en ny tråd ses på IOS.
Løsning: Et nyt lydobjekt opnår ved at erstatte forskellige lydadresser målet om ikke at åbne flere tråde.
Support er ikke god på Android
Løsning: Problemet på den lavere version af Android er ikke løst. Generelt kan blandet udvikling håndteres ved at justere den underliggende grænseflade, såsom phonegap
Kan ikke afspille automatisk på iphone
Løsning: Automatisk afspilning på iphone er en proces, der blev udført, da IOS blev designet. Det ser ud til at være for at forhindre automatisk tyveri af trafik.
Kort sagt skal det udløses manuelt ved at simulere brugeren, så vi skal kalde dette kodestykke helt i begyndelsen:
Kopier kode
//Løs problemet med, at ios-browseren ikke automatisk kan afspille lyd. Opret ny lyd ved indlæsning og udskift src, når du bruger den.
Xut.fix = Xut.fix||{};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = falsk
var fixaudio = function() {
if (!isAudio) {
erLyd = sand;
Xut.fix.audio = ny lyd();
document.removeEventListener('touchstart', fixaudio, false);
}
};
document.addEventListener('touchstart', fixaudio, false);
}
Kopier koden ovenfor
Hvis du binder en sådan kode til kroppen: Opret et lydobjekt ved at udløse det manuelt, og gem det derefter i den globale
Når det bruges som følger:
Kopier kode
//Hvis du bruger Xut.fix.audio til at angive src for iOS-browseren, se venligst app.js for initialisering
if (Xut.fix.audio) {
lyd
=
Xut.fix.audio;
audio.src = url;
} Else {
audio = ny Audio(url);
}
audio.autoplay = sand;
audio.play();
Du skal blot udskifte lydobjektet. Kort sagt skal det være det objekt, der er oprettet af brugerens udløser for at spille.
H5 video lyd
Videotags kan sjældent bruges på mobilterminalen, Android-understøttelse er for dårlig, visuelt er 5.0 bedre. Det gamle problem på iPhone kan ikke afspilles automatisk (Gem data, gem din søster!!!), og standarden er fuldskærmskontrol for at spille. I lang tid ignorerede jeg denne videobehandling. Android bruger det nederste lag, iPhone bruger direkte VideoJS, den indbyggede flash og h5 switch, flash har også supportproblemer. For et stykke tid siden havde chefen et krav. Vi anvendte for mange animationer, alle var kombinerede animationer af sprite-ruter, lige fra hundredvis af megabyte til hundredvis af megabyte under én app, så der er et presserende behov for en løsning til at komprimere billeder. Den endelige løsning er at bruge video i stedet for animation, fordi videokomprimeringsteknologien er blevet udviklet i mange år og har været meget moden. Nu kan videokomprimeringsteknologi nemt konvertere 720P. High-definition film, komprimeret til 10M/min eller 160K/sek. Filstørrelsen af billedsekvensen er mindst flere titusinder gange mindre. Samtidig understøtter de fleste enheder hardwaredekomprimering af video, så CPU-forbruget ved videoafspilning er meget lavt, batteriforbruget er også meget lavt, og afspilningshastigheden er også hurtig. Selv afspilning i fuld skærm på 25 billeder kan nemt opnås.
Planen er færdiggjort, og flere problemer, der skal løses, er her.
Hele videoen, inklusive nogle objekter i videoen, kan reagere på brugerklik, dias og andre handlinger under iPhone, kan afspilles i et vindue, kan filtrere baggrunden fra og kan bruges som et PNG-billede. Videoen erstatter animationen og understøtter derefter baggrundsmaskeeffekten, som kan afsløre basisbilledet og også løser problemet med manuel, automatisk og ufuldstændig skærm
iphone vindue
Løsning: Kombiner behandling gennem lærred + videotags
Princip: Hent den originale billedramme af videoen og tegn den til siden gennem canavs
Her vedhæfter jeg direkte kildekoden, koden er skrevet generelt, men fremhæver et par hovedpunkter
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 animation
Det her er lidt besværligt. Det skal være interaktivt og trække lærredet for at opnå formålet med at kontrollere billedet. Jeg er ikke færdig med at skrive det hele endnu, og generelle virksomhedsbehov vil ikke have dette. Her er en kort beskrivelse, den behandles også af lærred + video, men der kræves en cachebeholder for lærred for at lave en forbehandling. Gennem forbehandling, få pixels af hvert billede, og ved at ændre værdien af hver pixel RBG, kan den filtrere baggrunden fra, så den kan bruges som et PNG-billede. Jeg vil skrive det senere og udgive det~~
Vores andet produkt:
