In letzter Zeit untersuchen wir die Verwendung von Video anstelle von Animation und Video anstelle von Sprite-Animation. Wir nennen diese Art von Video interaktives Video.
Traditionelle Sprite-Animation: Großer Speicherplatz, langsames Herunterladen, insbesondere Online-Wiedergabe, sind langsamer
Zu viele Dateien, zu viele http-Anforderungen bei der Online-Wiedergabe führen zu einer langsamen Reaktion oder zu abnormalem Verhalten. Daher ist es dringend erforderlich, eine Reihe von Technologien zu entwickeln, um Sprite-Animationen durch Videos zu ersetzen. Wir nennen diese Art von Video ein interaktives Video
Probleme mit herkömmlichen Videos:
1. Kann nur in einem quadratischen Bereich gespielt werden
2. Unter dem iPad ist es ein Fenster zum Abspielen, und unter dem iPhone kann es nur im Vollbildmodus abgespielt werden.
3. Beim Spielen wird es definitiv im Vordergrund stehen
Interaktives Video weist die folgenden Eigenschaften auf:
Unter dem iPhone ist keine Vollbildwiedergabe erforderlich, sondern kann in einem Bereich abgespielt werden
Interaktives Video kann unter normalen Grafikobjekten angezeigt werden
Interaktives Video kann eine Maske haben, so dass der Hintergrund des Videos entfernt und das Video und normale Grafikobjekte integriert werden können
Zusammenfassung: Für das zum Abspielen verwendete Video legen wir es als traditionelles Video fest. Für Videos, die für bestimmte Zwecke verwendet werden müssen, stellen wir sie als interaktive Videos ein. Die Forschung hat vorläufige Ergebnisse geliefert. Es fasst übrigens die aktuellen Probleme bei der Audio- und Videoentwicklung des mobilen H5 in den nächsten Jahren zusammen und stellt eigene Lösungen bereit. Sehen Sie sich den endgültigen tatsächlichen Effekt an: kompatibel mit PC (>IE9), iPhone, iPad, Android 5.0
Lösen Sie die Probleme des manuellen, automatischen und Fenstering auf dem iPhone, und es kann grundsätzlich in der eigentlichen Produktion verwendet werden. Auf der rechten Seite befindet sich die ursprüngliche Video-MP4-Datei, das Video auf der linken Seite ersetzt die Animation und unterstützt dann den Hintergrundmaskeneffekt, kann die Basiskarte anzeigen und unterstützt eine Reihe interaktiver Operationen
H5 Audio
Jedes Mal, wenn ein Audioobjekt durch neues Audio geleitet wird, wird unter IOS ein neuer Thread angezeigt.
Lösung: Ein neues Audioobjekt erreicht durch Ersetzen verschiedener Audioadressen das Ziel, nicht mehr Threads zu öffnen.
Die Unterstützung ist auf Android nicht gut
Lösung: Das Problem in der unteren Version von Android ist nicht gelöst. Im Allgemeinen kann eine gemischte Entwicklung durch Anpassen der zugrunde liegenden Schnittstelle, z. B. Phonegap, bewältigt werden
Kann nicht automatisch auf dem iPhone spielen
Lösung: Die automatische Wiedergabe auf dem iPhone erfolgt bei der Entwicklung von IOS. Es scheint zu sein, um automatischen Diebstahl des Verkehrs zu verhindern.
Einfach ausgedrückt, muss es manuell durch Simulation des Benutzers ausgelöst werden, daher müssen wir diesen Code ganz am Anfang aufrufen:
Code kopieren
// Behebung des Problems, dass der iOS-Browser Audio nicht automatisch wiedergeben kann. Erstellen Sie beim Laden neues Audio und ersetzen Sie src, wenn Sie es verwenden.
Xut.fix = Xut.fix || {};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = falsch
var fixaudio = function () {
if (! isAudio) {
isAudio = wahr;
Xut.fix.audio = neues Audio ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Kopieren Sie den obigen Code
Wenn Sie einen solchen Code an den Body binden: Erstellen Sie ein Audioobjekt, indem Sie es manuell auslösen, und speichern Sie es dann im globalen Code
Bei Verwendung wie folgt:
Code kopieren
// Wenn Sie Xut.fix.audio verwenden, um src für den ios-Browser anzugeben, lesen Sie bitte die Initialisierung in app.js.
if (Xut.fix.audio) {
Audio-
=
Xut.fix.Audio;
audio.src = URL;
} Else {
Audio = neues Audio (URL);
}
audio.autoplay = wahr;
audio.play ();
Ersetzen Sie einfach das Audioobjekt. Einfach ausgedrückt muss es das Objekt sein, das vom Benutzer-Trigger zum Spielen erstellt wurde.
H5 Video Audio
Video-Tags werden möglicherweise selten auf dem mobilen Terminal verwendet, die Android-Unterstützung ist zu schlecht, visuell ist 5.0 besser. Das alte Problem auf dem iPhone kann nicht automatisch abgespielt werden (Daten speichern, Schwester speichern !!!), und die Standardeinstellung ist die Vollbildsteuerung. Ich habe diese Videoverarbeitung lange ignoriert. Android verwendet die unterste Ebene, iPhone verwendet direkt VideoJS, den eingebauten Flash- und H5-Schalter, Flash hat auch Support-Probleme. Vor einiger Zeit hatte der Chef eine Nachfrage. Wir haben zu viele Animationen angewendet. Alle waren kombinierte Animationen von Sprite-Routen, die von Hunderten von Megabyte bis zu Hunderten von Megabyte unter einer App reichen. Daher besteht ein dringender Bedarf an einer Lösung zum Komprimieren von Bildern. Die endgültige Lösung besteht darin, Video anstelle von Animation zu verwenden, da die Videokomprimierungstechnologie seit vielen Jahren entwickelt und sehr ausgereift ist. Jetzt kann die Videokomprimierungstechnologie 720P problemlos konvertieren. Hochauflösende Filme, komprimiert auf 10 M / min oder 160 K / s. Die Dateigröße der Bildsequenz ist mindestens einige zehnmal kleiner. Gleichzeitig unterstützen die meisten Geräte die Hardware-Dekomprimierung von Videos, so dass der CPU-Verbrauch bei der Videowiedergabe sehr gering ist, der Batterieverbrauch ebenfalls sehr niedrig ist und die Wiedergabegeschwindigkeit ebenfalls hoch ist. Selbst eine Vollbildwiedergabe von 25 Bildern kann problemlos erreicht werden.
Der Plan ist fertiggestellt und einige zu lösende Probleme sind hier.
Das gesamte Video, einschließlich einiger Objekte im Video, kann auf Benutzerklicks, Folien und andere Vorgänge unter dem iPhone reagieren, in einem Fenster abgespielt werden, den Hintergrund herausfiltern und wie ein PNG-Bild verwendet werden. Das Video ersetzt die Animation und unterstützt dann den Hintergrundmaskeneffekt, der das Basisbild anzeigen kann, und löst auch das Problem des manuellen, automatischen und unvollständigen Bildschirms
iPhone Fenster
Lösung: Kombinieren Sie die Verarbeitung über Canvas + Video-Tags
Prinzip: Holen Sie sich den Original-Bilderrahmen des Videos und zeichnen Sie ihn durch Canavs auf die Seite
Hier füge ich den Quellcode direkt hinzu, der Code ist allgemein geschrieben, hebt aber einige wichtige Punkte hervor
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Video statt Animation
Das ist etwas umständlich. Es muss interaktiv sein und die Leinwand ziehen, um den Zweck der Bildsteuerung zu erreichen. Ich habe noch nicht alles fertig geschrieben, und die allgemeinen Unternehmensanforderungen werden dies nicht haben. Hier ist eine kurze Beschreibung, die auch von Canvas + Video verarbeitet wird. Für eine Vorverarbeitung ist jedoch ein zwischengespeicherter Canvas-Container erforderlich. Durch Vorverarbeitung erhalten Sie die Pixel jedes Bildes, und durch Ändern des Werts jedes Pixel-RBG kann der Hintergrund herausgefiltert werden, sodass er wie ein PNG-Bild verwendet werden kann. Ich werde es später schreiben und veröffentlichen ~~
Unsere anderen Produkt:
