Nyligen studerar vi användningen av video istället för animation och video istället för sprite-animation. Vi kallar den här typen av video interaktiv video.
Traditionell sprite-animation: stort diskutrymme, långsam nedladdning, särskilt onlineuppspelning, kommer att gå långsammare
För många filer, för många http-förfrågningar när du spelar online, kommer att orsaka långsam respons eller onormalt beteende. Därför finns det ett akut behov av att utveckla en uppsättning teknik för att ersätta sprite-animation med video. Vi kallar den här typen av video för en interaktiv video
Problem med traditionell video:
1. Kan endast spelas i ett kvadratiskt område
2. Under iPad är det ett fönster att spela på, och under iPhone kan det bara spelas i helskärm.
3. När du spelar kommer det definitivt att synas i framkant
Interaktiv video har följande egenskaper:
Under iPhone krävs inte uppspelning i helskärm, den kan spelas i ett område
Interaktiv video kan visas under vanliga grafiska objekt
Interaktiv video kan ha en mask, så att bakgrunden på videon kan tas bort och videon och vanliga grafiska objekt kan integreras
Sammanfattning: För videon som används för att spela upp kommer vi att ställa in den som en traditionell video. För videor som behöver användas för specifika ändamål ställer vi in dem som interaktiva videor. Forskningen har gett preliminära resultat. Förresten, den sammanfattar de faktiska problemen som stött på i ljud- och videoutvecklingen av mobilen H5 under de närmaste åren och ger sina egna lösningar. Ta en titt på den slutliga faktiska effekten: kompatibel med PC (>IE9), iphone, ipad, Android 5.0
Lös problemen med manuell, automatisk och fönsterfunktion på iPhone, och det kan i princip användas i faktisk produktion. Till höger är den ursprungliga video-mp4-filen, videon till vänster ersätter animationen och stöder sedan bakgrundsmaskeffekten, kan avslöja baskartan och stöder en serie interaktiva operationer
H5 ljud
Varje gång ett ljudobjekt passeras genom nytt ljud, kan en ny tråd ses på IOS.
Lösning: Ett nytt ljudobjekt, genom att ersätta olika ljudadresser, uppnår målet att inte öppna fler trådar.
Supporten är inte bra på Android
Lösning: Problemet på den lägre versionen av Android är inte löst. I allmänhet kan blandad utveckling hanteras genom att justera det underliggande gränssnittet, såsom phonegap
Kan inte spela upp automatiskt på iphone
Lösning: Automatisk uppspelning på iphone är en process som gjordes när IOS designades. Det verkar vara för att förhindra automatisk stöld av trafik.
Enkelt uttryckt måste den utlösas manuellt genom att simulera användaren, så vi måste kalla denna kodbit i början:
Kopiera kod
//Åtgärda problemet med att ios-webbläsaren inte kan spela upp ljud automatiskt. Skapa nytt ljud när du laddar och byt ut src när du använder det.
Xut.fix = Xut.fix||{};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = falskt
var fixaudio = function() {
if (!isAudio) {
isAudio = sant;
Xut.fix.audio = nytt ljud();
document.removeEventListener('touchstart', fixaudio, false);
}
};
document.addEventListener('touchstart', fixaudio, false);
}
Kopiera koden ovan
Om du binder en sådan kod till kroppen: skapa ett ljudobjekt genom att manuellt trigga det och spara det sedan i den globala
Vid användning enligt följande:
Kopiera kod
//Om du använder Xut.fix.audio för att ange src för iOS-webbläsaren, se app.js för initiering
if (Xut.fix.audio) {
audio
=
Xut.fix.audio;
audio.src = webbadress;
} Else {
audio = new Audio(url);
}
audio.autoplay = sant;
audio.play();
Byt bara ut ljudobjektet. Enkelt uttryckt måste det vara objektet som skapats av användarens utlösare för att spela.
H5 videoljud
Videotaggar kanske sällan används på mobilterminalen, Android-stödet är för dåligt, visuellt är 5.0 bättre. Det gamla problemet på iPhone kan inte spelas upp automatiskt (Spara data, spara din syster!!!), och standard är fullskärmskontroll för att spela. Under en lång tid ignorerade jag denna videobearbetning. Android använder det undre lagret, iPhone använder direkt VideoJS, den inbyggda blixten och h5 switchen, flash har också supportproblem. För ett tag sedan hade chefen ett krav. Vi använde för många animationer, alla var kombinerade animationer av sprite-rutter, allt från hundratals megabyte till hundratals megabyte under en app, så det finns ett akut behov av en lösning för att komprimera bilder. Den slutliga lösningen är att använda video istället för animation, eftersom videokomprimeringstekniken har utvecklats i många år och har varit väldigt mogen. Nu kan videokomprimeringsteknik enkelt konvertera 720P. Högupplösta filmer, komprimerade till 10M/min eller 160K/sek. Filstorleken på bildsekvensen är åtminstone flera tiotals gånger mindre. Samtidigt stöder de flesta enheter hårdvarudekomprimering av video, så att CPU-förbrukningen för videouppspelning är mycket låg, batteriförbrukningen är också mycket låg och uppspelningshastigheten är också snabb. Även helskärmsuppspelning av 25 bildrutor kan enkelt uppnås.
Planen är färdig, och flera problem som ska lösas är här.
Hela videon, inklusive vissa objekt i videon, kan svara på användarklick, bilder och andra operationer under iPhone, kan spelas upp i ett fönster, kan filtrera bort bakgrunden och kan användas som en PNG-bild. Videon ersätter animationen och stöder sedan bakgrundsmaskeffekten, som kan avslöja basbilden och även löser problemet med manuell, automatisk och ofullständig skärm
iphone fönster
Lösning: Kombinera bearbetning genom canvas + videotaggar
Princip: Skaffa den ursprungliga bildramen för videon och rita den till sidan genom canavs
Här bifogar jag källkoden direkt, koden är skriven generellt, men lyfter fram några centrala punkter
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Video istället för animation
Det här är lite krångligt. Det måste vara interaktivt och dra duken för att uppnå syftet med att kontrollera bilden. Jag har inte skrivit klart allt ännu, och allmänna företagsbehov kommer inte att ha detta. Här är en kort beskrivning, den bearbetas även av canvas + video, men en cachad canvasbehållare krävs för att göra en förbearbetning. Genom förbearbetning, få pixlarna för varje bild, och genom att ändra värdet på varje pixel RBG kan den filtrera bort bakgrunden, så att den kan användas som en PNG-bild. Jag kommer att skriva det senare och publicera det~~
Vår andra produkt:
