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

In letzter Zeit 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 Videos interaktive Videos.

Traditionelle Sprite-Animation:

• Großer Speicherplatz und langsames Herunterladen, insbesondere Online-Wiedergabe, werden noch langsamer sein

• Beim Online-Spielen führen zu viele HTTP-Anfragen zu langsamer Reaktion oder abnormalem Verhalten

Daher besteht ein dringender Bedarf, ein Set zu entwickeln von Technologien zur Verwendung von Video anstelle von Sprite-Animationen. Wir nennen diese Art von Video interaktives Video

Probleme mit herkömmlichen Videos:

• Herkömmliche Videos können nur in einem quadratischen Bereich abgespielt werden

• Traditionelle Videos werden in Windows auf dem iPad abgespielt, aber auf dem iPhone können sie nur im Vollbildmodus abgespielt werden

• Traditionelle Videos werden auf jeden Fall beim Abspielen im Frontend angezeigt

• 
  

Interaktives Video hat die folgenden Eigenschaften:

• Unter dem iPhone muss nicht im Vollbildmodus abgespielt werden, es kann in einem Bereich abgespielt werden

• Interaktive Videos können unter gewöhnlichen Grafiken Objekten

• Interaktive Videos können Masken haben, die den Hintergrund des Videos entfernen und das Video mit gewöhnlichen Grafikobjekten integrieren können

Zusammenfassung: Für Videos, die einfach abgespielt werden, werden wir auf herkömmliche Videos umstellen. Für Videos, die für bestimmte Zwecke verwendet werden müssen, stellen wir sie als interaktive Videos ein.

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

Sehen Sie sich den endgültigen tatsächlichen Effekt an: kompatibel mit PC (>IE9), iPhone, iPad, Android 5.0Es löst die Probleme von manuell, automatisch, Fenster usw. auf dem iPhone , und kann grundsätzlich verwendet werden Tatsächlich produziert

Die rechte Seite ist die ursprüngliche Video-MP4-Datei

Das Video auf der linken Seite ersetzt die Animation und unterstützt dann den Hintergrundmaskeneffekt, der die Basis freigeben kann Karte und unterstützt eine Reihe interaktiver Vorgänge

H5-Audio-Audio

Ein Audio Objekt wird jedes Mal durch neues Audio geleitet, was auf IOS zu sehen ist. Es wird ein neuer Thread generiert, was ekelhaft ist

• Lösung:

Neues Audioobjekt, durch Ersetzen verschiedener Audioadressen, den Zweck erreichen, keine weiteren Threads zu öffnen

Unzureichende Unterstützung auf Android

• Lösung:

Das Problem bei niedrigeren Android-Versionen wurde im Allgemeinen nicht gelöst, indem die zugrunde liegende

Schnittstelle

angepasst wird 🎜>

kann nicht automatisch auf dem iPhone verwendet werden

• Lösung:
  Die automatische Wiedergabe auf dem iPhone ist ein durchgeführter Vorgang als IOS entwickelt wurde, scheint es darum zu gehen, den automatischen Diebstahl von Datenverkehr zu verhindern

Um es einfach auszudrücken: Sie müssen den Benutzer simulieren, um es manuell auszulösen

Also müssen wir anrufen dieser Code am Anfang:

Das ist aus meinem Projekt, ich habe es einfach direkt abgeleitet

Angenommen, ein solcher Code ist an den Körper gebunden: Erstellen Sie manuell ein Audioobjekt Auslösen und dann im globalen Speicher speichern

Bei Verwendung ist es wie folgt

//修复ios 浏览器不能自动播放音频的问题 在加载时创建新的audio 用的时候更换src即可
Xut.fix = Xut.fix||{};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
    var isAudio = false
    var fixaudio = function() {
        if (!isAudio) {
            isAudio = true;
            Xut.fix.audio = new Audio();
            document.removeEventListener('touchstart', fixaudio, false);
        }
    };
    document.addEventListener('touchstart', fixaudio, false);
}

Sie können das vom Benutzer erstellte Audioobjekt direkt ersetzen muss automatisch ausgelöst werden, um

H5-Video-Audio

//如果为ios browser 用Xut.fix.audio 指定src 初始化见app.js
if (Xut.fix.audio) {
    audio 
=
 Xut.fix.audio;
    audio.src = url;
} else {
    audio = new Audio(url);
}
audio.autoplay = true;
audio.play();

Video-Tags werden auf Mobilgeräten selten verwendet. Die visuelle Unterstützung ist schrecklich 🎜>

Ein altes Problem auf dem iPhone, es kann nicht automatisch abgespielt werden (Speichern Sie Daten, retten Sie Ihre Schwester!!!) und die Standardeinstellung ist die Vollbild-Steuerungswiedergabe

Ich habe das lange Zeit ignoriert Videoverarbeitung. Android verwendet die unterste Ebene, das iPhone verwendet direkt VideoJS, integrierten Flash und H5-Switching, Flash hat auch Probleme mit der Unterstützung

Der Chef hatte vor einiger Zeit eine Anfrage sind alle kombinierte Animationen von Sprite-Routen.

Daher besteht ein dringender Bedarf an einer Lösung, um sie zu komprimieren.

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 7Ausführliche Erläuterung der Probleme und Lösungen für mobiles HTML5-Audio und -Video0P

High-Definition-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 hoch. Sogar eine Vollbildwiedergabe mit Ausführliche Erläuterung der Probleme und Lösungen für mobiles HTML5-Audio und -Video5 Bildern ist problemlos möglich

.

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

1. Das gesamte Video, einschließlich bestimmter Objekte im Video, kann auf die Klicks und Folien des Benutzers reagieren. Klassenoperationen

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

3. Kann den Hintergrund herausfiltern, sodass er wie ein PNG verwendet werden kann Bild

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

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

Gleichzeitig wird auch das Problem der manuellen, automatischen und nicht im Vollbildmodus auftretenden

iPhone-Fensterung

Lösung gelöst :

überLeinwand + Video-Tag kombinierte Verarbeitung

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

Video ersetzt Animation

Das ist etwas mühsam und erfordert Interaktion und Ziehen der Leinwand, um das Bild zu steuern. Ich habe noch nicht alles geschrieben , und allgemeine Unternehmensanforderungen werden dies nicht haben

Hier ist eine kurze Beschreibung, es wird auch von Canvas + Video verarbeitet, aber für die Vorverarbeitung ist ein zwischengespeicherter Canvas-Container erforderlich

Durch Vorverarbeitung erhalten Sie Durch Ändern des RBG-Werts jedes Pixels jedes Bildes kann der Hintergrund herausgefiltert werden,

, sodass er wie folgt verwendet werden kann ein PNG-Bild

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Probleme und Lösungen für mobiles HTML5-Audio und -Video. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!