Onlangs bestuderen we het gebruik van video in plaats van animatie en video in plaats van sprite-animatie. We noemen dit soort video interactieve video.
Traditionele sprite-animatie: grote schijfruimte, traag downloaden, vooral online afspelen, zal langzamer zijn
Te veel bestanden, te veel http-verzoeken bij het online spelen, zullen een trage reactie of abnormaal gedrag veroorzaken. Daarom is het dringend nodig om een set technologie te ontwikkelen om sprite-animatie te vervangen door video. We noemen dit soort video een interactieve video
Problemen met traditionele video:
1. Kan alleen gespeeld worden in een vierkant gebied
2. Onder de iPad is het een venster om af te spelen, en onder de iPhone kan het alleen op volledig scherm worden afgespeeld.
3. Tijdens het spelen zal het zeker op de voorgrond verschijnen
Interactieve video heeft de volgende kenmerken:
Onder de iPhone is afspelen op volledig scherm niet vereist, het kan in één gebied worden afgespeeld
Interactieve video kan onder gewone grafische objecten verschijnen
Interactieve video kan een masker hebben, zodat de achtergrond van de video kan worden verwijderd en de video en gewone grafische objecten kunnen worden geïntegreerd
Overzicht: Voor de video die wordt gebruikt om af te spelen, stellen we deze in als een traditionele video. Voor video's die voor specifieke doeleinden moeten worden gebruikt, stellen we ze in als interactieve video's. Het onderzoek heeft voorlopige resultaten opgeleverd. Trouwens, het vat de werkelijke problemen samen die zich de komende jaren voordoen bij de audio- en video-ontwikkeling van de mobiele H5 en biedt zijn eigen oplossingen. Bekijk het uiteindelijke daadwerkelijke effect: compatibel met pc (>IE9), iphone, ipad, Android 5.0
Los de problemen van handmatig, automatisch en vensters op de iPhone op, en het kan in principe worden gebruikt in de daadwerkelijke productie. Aan de rechterkant is het originele video-mp4-bestand, de video aan de linkerkant vervangt de animatie en ondersteunt vervolgens het achtergrondmaskereffect, kan de basiskaart onthullen en ondersteunt een reeks interactieve bewerkingen
H5-audio
Elke keer dat een audio-object door nieuwe audio wordt geleid, is er een nieuwe thread te zien op IOS.
Oplossing: een nieuw audio-object, door verschillende audio-adressen te vervangen, bereikt het doel om niet meer threads te openen.
Ondersteuning is niet goed op Android
Oplossing: het probleem op de lagere versie van Android is niet opgelost. Over het algemeen kan gemengde ontwikkeling worden afgehandeld door de onderliggende interface aan te passen, zoals phonegap
Kan niet automatisch afspelen op iPhone
Oplossing: automatisch afspelen op de iPhone is een proces dat werd uitgevoerd toen IOS werd ontworpen. Het lijkt te zijn om automatische diefstal van verkeer te voorkomen.
Simpel gezegd, het moet handmatig worden geactiveerd door de gebruiker te simuleren, dus we moeten dit stuk code helemaal aan het begin aanroepen:
Kopieer code
// Los het probleem op dat de ios-browser niet automatisch audio kan afspelen. Maak nieuwe audio bij het laden en vervang src bij gebruik.
Xut.fix = Xut.fix || {};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = onwaar
var fixaudio = function () {
if (! isAudio) {
isAudio = waar;
Xut.fix.audio = nieuwe audio ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Kopieer de bovenstaande code
Als u een dergelijke code aan de body bindt: maak een audio-object door het handmatig te activeren en sla het vervolgens op in de algemene
Bij gebruik als volgt:
Kopieer code
// Als u Xut.fix.audio gebruikt om src voor ios-browser op te geven, raadpleeg dan app.js voor initialisatie
als (Xut.fix.audio) {
audio
=
Xut.fix.audio;
audio.src = url;
} Else {
audio = nieuwe audio (url);
}
audio.autoplay = waar;
audio.play ();
Vervang gewoon het audio-object. Simpel gezegd, het moet het object zijn dat door de gebruiker is gecreëerd om te spelen.
H5 video-audio
Videolabels worden mogelijk zelden gebruikt op de mobiele terminal, Android-ondersteuning is slecht, visueel is 5.0 beter. Het oude probleem op de iPhone kan niet automatisch worden afgespeeld (gegevens opslaan, je zus redden !!!), en de standaardinstelling is bediening op volledig scherm om af te spelen. Ik negeerde deze videoverwerking lange tijd. Android gebruikt de onderste laag, iPhone gebruikt direct VideoJS, de ingebouwde flitser en h5-schakelaar, flitser heeft ook ondersteuningsproblemen. Een tijdje geleden had de baas een eis. We hebben te veel animaties toegepast, het waren allemaal gecombineerde animaties van spriteroutes, variërend van honderden megabytes tot honderden megabytes onder één app, dus er is dringend behoefte aan een oplossing om afbeeldingen te comprimeren. De uiteindelijke oplossing is om video te gebruiken in plaats van animatie, omdat videocompressietechnologie al vele jaren is ontwikkeld en zeer volwassen is geworden. Nu kan de videocompressietechnologie 720P gemakkelijk converteren. High-definition films, gecomprimeerd tot 10 M / min of 160 K / sec. De bestandsgrootte van de afbeeldingsreeks is minstens enkele tientallen keren kleiner. Tegelijkertijd ondersteunen de meeste apparaten hardware-decompressie van video, zodat het CPU-verbruik bij het afspelen van video erg laag is, het batterijverbruik ook erg laag is en de afspeelsnelheid ook hoog is. Zelfs weergave op volledig scherm van 25 frames kan gemakkelijk worden bereikt.
Het plan is afgerond en er zijn verschillende problemen die moeten worden opgelost.
De hele video, inclusief enkele objecten in de video, kan reageren op gebruikersklikken, dia's en andere bewerkingen onder de iPhone, kan in een venster worden afgespeeld, kan de achtergrond wegfilteren en kan worden gebruikt als een PNG-afbeelding. De video vervangt de animatie en ondersteunt vervolgens het achtergrondmaskereffect, dat het basisbeeld kan onthullen en ook het probleem van handmatig, automatisch en onvolledig scherm oplost
iPhone-vensters
Oplossing: combineer verwerking via canvas + videotags
Principe: verkrijg het originele afbeeldingsframe van de video en teken het via canavs naar de pagina
Hier voeg ik de broncode rechtstreeks toe, de code is in het algemeen geschreven, maar benadrukt een paar belangrijke punten
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Video in plaats van animatie
Dit is een beetje omslachtig. Het moet interactief zijn en het canvas slepen om het doel van het besturen van de afbeelding te bereiken. Ik ben nog niet helemaal klaar met schrijven, en de algemene bedrijfsbehoeften zullen dit niet hebben. Hier is een korte beschrijving, deze wordt ook verwerkt door canvas + video, maar een gecachte canvascontainer is vereist om een voorverwerking uit te voeren. Haal door voorbewerking de pixels van elke afbeelding op en door de waarde van elke pixel RBG te wijzigen, kan deze de achtergrond wegfilteren, zodat deze kan worden gebruikt als een PNG-afbeelding. Ik zal het later schrijven en het ~~ publiceren
Onze andere producten:
