In diesem Artikel teilen wir Ihnen mit, wie Sie Browserkompatibilität für HTML5-Videos erreichen. In der Vergangenheit war Flash die beste Lösung, um Videos auf Webseiten zu lösen Websites wie Youku und Xiami verwenden immer noch Flash, um Wiedergabedienste bereitzustellen. Diese Situation wird sich jedoch mit der Entwicklung von HTML5 ändern. Was Videos betrifft, fügt HTML5 Videos hinzu, um die Funktion der Online-Wiedergabe von Videos zu implementieren.
Mit HTML5-Video können Sie ganz einfach JavaScript verwenden, um Videoinhalte usw. zu steuern. Es ist sehr leistungsstark und enthält weniger Code, um das Laden zu beschleunigen. Darüber hinaus ist die plattformübergreifende Funktion relativ gut, insbesondere bei einigen Tablets, Mobiltelefonen usw. Beispielsweise unterstützen die Produkte von Apple kein Flash und nur die Videofunktion in HTML5.
Das Kompatibilitätsproblem von HTML5 ist jedoch ein Fehler. Wir können Videos zum Abspielen von Videos auf Webseiten verwenden, aber Besucher, die ältere Browser verwenden, können dieses Video möglicherweise nicht normal ansehen. Darüber hinaus unterstützen verschiedene Browser aufgrund des historischen Ursprungs von Video-Encodern unterschiedliche Videoformate. Um diese Probleme zu lösen und die HTML5-Videofunktion in Webseiten nutzen zu wollen, können Sie die folgenden drei Schritte befolgen.
Schritt eins: Bereiten Sie Multiformat-Videodateien im Voraus vor
Aufgrund von Urheberrechtsproblemen mit Encodern sind verschiedene Browser unterschiedlich mit Videoformaten kompatibel. Derzeit ist kein Videoformat mit allen Browsern kompatibel und die einzige Lösung besteht darin, das Video in mehrere Formate zu konvertieren.
Bereiten Sie zunächst ein Video im MP4-Format vor, das auf Apple-Geräten verwendet werden kann. Zweitens bereiten Sie ein Video im OGV-Format vor, das in Firefox verwendet werden kann kann auf Google Chrome usw. verwendet werden. Webm wurde von Google vorgeschlagen, ist Open Source, kostenlos und wird wahrscheinlich ein Videoformat werden, das mit allen Browsern kompatibel ist.
Das Problem bei der Vorbereitung eines Multiformat-Browsers ist die Konvertierung der Formate. Inländische Videokonvertierungstools verfügen über relativ wenige Funktionen, das Konvertierungsformat ist möglicherweise nicht so gut wie die letzten beiden oben, die Qualität variiert und vor der Verwendung ist häufig eine Registrierung erforderlich. Empfehlen Sie ein fremdes Tool Online Converter, ein kostenloses Online-Tool zur Videokonvertierung. Sie müssen nicht einmal Software installieren, wählen Sie einfach das entsprechende Zielformat aus, laden Sie dann das Video hoch, konfigurieren Sie die Parameter und schon können Sie es konvertieren. Wenn Sie nicht über die richtigen Werkzeuge verfügen, können Sie es versuchen.
Schritt 2: Schreiben Sie den entsprechenden HTML5-Videocode
Das Video in HTML5 ist eigentlich ein einfaches Tag, das einige videobezogene Informationen enthält. Ich werde den spezifischen Code unten direkt angeben und ihn dann kurz erläutern:
<video width="800" height="374">
<source src="my_video.mp4" type="video/mp4" />
<source src="my_video.ogv" type="video/ogg" />
<source src="my_video.webm" type="video/webm" />
Nach dem Login kopieren
Ihr Browser unterstützt die Videofunktion nicht. Klicken Sie hier, um das Video herunterzuladen:
Video-Tag gibt an, dass es sich um ein Video handelt, und die Attribute width und height geben die Breite bzw. Höhe (Einheitspixel) des Videoinhalts an . Das Video-Tag kann das Quell-Tag enthalten, das zur Angabe des referenzierten Videos sowie des Formats und Typs des Videos verwendet wird. Um die Abwärtskompatibilität sicherzustellen, haben wir auch eine Eingabeaufforderung in das Video-Tag eingefügt. Dieser Satz wird in Browsern, die das Video-Tag unterstützen, nicht angezeigt. Hier wird auch eine Video-Download-Adresse hinzugefügt. Wenn der Browser dies nicht unterstützt, können Benutzer es herunterladen und ansehen.
Besonders zu beachten ist, dass Ihr Gastgeber in der Lage sein muss, diese Videoanfragen korrekt zu bearbeiten. Stellen Sie sicher, dass Ihr Host den richtigen MIME-Typ im Content-Type-Header sendet, wenn er für diese Videos angefordert wird. Wenn Sie sich nicht sicher sind, können Sie sich an den Hosting-Dienstleister wenden oder ihn selbst hinzufügen. Wenn der Host .htaccess unterstützt, können Sie die folgende Anweisung zur .htaccess-Datei hinzufügen:
Für spezifischere Methoden zur Verwendung von Videos können Sie danach suchen Sie können auch den erweiterten Leselink dieses Artikels sehen. Ich werde hier nicht auf Details eingehen.
Schritt 3: Kompatibilität für ältere Browser herstellen
Wie bereits erwähnt, wird der Inhalt der Aufforderung im Video angezeigt, wenn der Browser kein Video unterstützt. Bei alten Browsern können wir diesen Eingabeaufforderungsinhalt also durch herkömmliches Flash ersetzen. Wenn der Browser nicht mit dem Video-Tag kompatibel ist, wird auf diese Weise die Flash-Version des Videos angezeigt. Beispiel:
<video width="800" height="374">
<source src="my_video.mp4" type="video/mp4" />
<source src="my_video.ogv" type="video/ogg" />
<object width="800" height="374" type="application/x-shockwave-flash" data="fallback.swf">
<param name="movie" value="fallback.swf" />
<param name="flashvars" value="autostart=true&file=video.flv" />
</object></video>
Nach dem Login kopieren
kann gemäß der ursprünglichen normalen Flash-Einführungsmethode direkt in das Video-Tag geschrieben werden. Dadurch erreichen wir eine browserübergreifende kompatible Nutzung der Videofunktion.
Der obige Inhalt befasst sich mit der Methode zum Erreichen der Browserkompatibilität für HTML5-Videos. Ich hoffe, dass er allen helfen kann.
Verwandte Empfehlungen:
Browserkompatibilitätsprobleme mit HTML5 und CSS3
Welche Browser erfordern eine Kompatibilitätsüberprüfung in HTML
Implementieren Sie JS-Code für die Musikwiedergabe, der mit verschiedenen Browsern kompatibel ist
Das obige ist der detaillierte Inhalt vonHTML5-Videomethode, um Browserkompatibilität zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
