Ausführliche Erläuterung der Probleme und Lösungen für mobiles HTML5-Audio und -Video

Kürzlich untersuchen wir die Verwendung von Videos als Ersatz für Animationen und die Verwendung von Videos als Ersatz für Sprite-Animationen. Wir nennen diese Art von Video interaktives Video.

1. Großer Speicherplatz und langsames Herunterladen, insbesondere Online-Wiedergabe, werden noch langsamer
2. Beim Online-Spielen führen zu viele HTTP-Anfragen zu einer langsamen Reaktion oder einem abnormalen Verhalten.

Daher besteht ein dringender Bedarf an der Entwicklung einer Reihe von Technologien, um Sprite-Animationen durch Videos zu ersetzen. Wir nennen diese Art von Video interaktives Video

1. Herkömmliche Videos können nur in einem quadratischen Bereich abgespielt werden
2. Herkömmliche Videos werden auf dem iPad in einem Fenster abgespielt, auf dem iPhone können sie jedoch nur im Vollbildmodus abgespielt werden.
3. Herkömmliche Videos werden beim Abspielen auf jeden Fall im Vordergrund erscheinen.

1. Unter dem iPhone ist es nicht erforderlich, im Vollbildmodus zu spielen, Sie können in einer Region spielen
2. Interaktive Videos können unter gewöhnlichen Grafikobjekten angezeigt werden
3. Interaktive Videos können maskiert werden, wodurch der Hintergrund des Videos entfernt und das Video mit gewöhnlichen Grafikobjekten vermischt wird.

Die Recherche hat zunächst zu Ergebnissen geführt. Ich werde übrigens die praktischen Probleme zusammenfassen, die bei der Entwicklung des mobilen H5 in den letzten Jahren aufgetreten sind, und meine eigenen Lösungen nennen.

Schauen Sie sich den endgültigen tatsächlichen Effekt an: kompatibel mit PC (>IE9), iPhone, iPad, Android 5.0

Es löst die Probleme manueller, automatischer, Fenster usw. auf dem iPhone und kann grundsätzlich in der tatsächlichen 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 den Hintergrundmaskeneffekt, der das Basisbild sichtbar machen und eine Reihe interaktiver Vorgänge unterstützen kann.

Jedes Mal, wenn ein Audioobjekt durch neues Audio geleitet wird, können Sie sehen, dass unter IOS ein neuer Thread generiert wird.

Lösung: Verwenden Sie ein neues Audioobjekt, um durch Ersetzen verschiedener Audioadressen den Zweck zu erreichen, nicht mehr Threads zu öffnen.

Lösung: Das Problem ist bei niedrigeren Android-Versionen nicht gelöst. Im Allgemeinen kann bei der Hybridentwicklung die zugrunde liegende Schnittstelle angepasst werden, z. B. Phonegap.

Lösung: Die automatische Wiedergabe auf dem iPhone ist ein Prozess, der bei der Entwicklung von iOS durchgeführt wurde, um den automatischen Diebstahl von Datenverkehr zu verhindern.

Um es einfach auszudrücken: Sie müssen den Benutzer simulieren, um es manuell auszulösen. Daher müssen wir diesen Code am Anfang aufrufen:

Das ist aus meinem Projekt, ich habe es einfach abgezogen.

 //Behebung des Problems, dass der iOS-Browser beim Laden kein neues Audio abspielen kann und den src ersetzen, wenn er verwendet wird. plat. isIOS) { var isAudio = false var fixaudio = function() { if (!isAudio) { isAudio = true; document.removeEventListener('touchstart', fixaudio, false);} }; document.addEventListener('touchstart', fixaudio, false);}

Wenn Sie einen solchen Code an den Körper binden: Erstellen Sie durch manuelles Auslösen ein Audioobjekt und speichern Sie es dann im globalen

Bei der Verwendung ist es wie folgt

 //Wenn Sie Xut.fix.audio verwenden, um die SRC-Initialisierung für den iOS-Browser anzugeben, siehe app.jsif (Xut.fix.audio) { audio = Xut.fix.audio;} else { audio = new Audio(url );}audio.autoplay = true;audio.play();

Ersetzen Sie einfach das Audioobjekt direkt, wenn es automatisch erstellt werden soll, muss es ein vom Benutzer ausgelöstes Objekt sein, das abgespielt werden soll.

Der Video-Tag wird auf mobilen Geräten möglicherweise nur selten verwendet. Er wurde erst in 5.0 verbessert.

Ein altes Problem auf dem iPhone ist, dass es nicht automatisch abgespielt werden kann (Speichern Sie Daten, retten Sie Ihre Schwester!!!) und die Standardeinstellung die Wiedergabe im Vollbildmodus ist

Ich habe diese Videoverarbeitung lange Zeit ignoriert, und das iPhone verwendet VideoJS. Es verfügt auch über integriertes Flash und h5-Flash.

Vor einiger Zeit hatte mein Chef eine Anfrage. Wir haben zu viele Anwendungsanimationen, bei denen es sich ausschließlich um Kombinationsanimationen von Sprite-Routen handelt. Eine App kann zwischen Hunderten und Hunderten von Megabyte groß sein.

Daher besteht dringender Bedarf an einer Lösung zum Komprimieren von Bildern

Die endgültige Lösung besteht darin, Video anstelle von Animationen zu verwenden, da die Videokomprimierungstechnologie seit vielen Jahren entwickelt wird und sehr ausgereift ist. Aktuelle Videokomprimierungstechnologien können hochauflösende 720P-Filme problemlos auf 10 M/Minute oder 160 K/Sekunde komprimieren. Sie ist mindestens ein Dutzend Mal kleiner als die Dateigröße der Bildsequenz. Gleichzeitig unterstützen die meisten Geräte die Hardware-Dekomprimierung von Videos. Dadurch ist der CPU-Verbrauch bei der Videowiedergabe sehr gering, der Akkuverbrauch ist ebenfalls sehr gering und die Wiedergabegeschwindigkeit ist immer noch hoch. Sogar eine Vollbildwiedergabe mit 25 Bildern ist problemlos möglich.

Nachdem der Plan fertiggestellt ist, müssen einige Probleme gelöst werden.

1. Das gesamte Video, einschließlich bestimmter Objekte im Video, kann auf Benutzerklicks, Folien und andere Vorgänge reagieren.

2. Unter dem iPhone können Sie in einem Fenster spielen

3. Möglichkeit, den Hintergrund herauszufiltern, sodass er wie ein PNG-Bild verwendet werden kann

Der endgültige tatsächliche Effekt wird auch in der Start-GIF-Animation gezeigt:

Das Video ersetzt die Animation und unterstützt den Hintergrundmaskierungseffekt, der das Basisbild sichtbar machen kann.

Gleichzeitig wurde auch das Problem gelöst, dass manuell, automatisch und nicht im Vollbildmodus angezeigt wird.

Lösung:

Verarbeitet durch eine Kombination aus Canvas und Video-Tag

Prinzip: Holen Sie sich den Originalrahmen des Videos und zeichnen Sie ihn über Canavs auf die Seite

Hier hänge ich den Quellcode direkt an. Der Code ist im Allgemeinen geschrieben, es werden jedoch einige wichtige Punkte hervorgehoben.

http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser

Dies ist etwas mühsam. Sie müssen die Leinwand verschieben, um sie zu steuern. Ich habe noch nicht alles geschrieben, was ich brauche. Dies ist auch eine einfache Beschreibung Video, aber es braucht einen zwischengespeicherten Canvas-Container für die Vorverarbeitung. Durch Ändern des RBG-Werts jedes Pixels kann der Hintergrund herausgefiltert werden, sodass er wie ein PNG verwendet werden kann Bild. In der Zukunft ist es geschrieben, lasst es uns veröffentlichen~~

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.