Ausführliche Erläuterung des Plans zur Verbesserung der Browserkompatibilität für HTML5-Video-Tags

Bei der Verwendung von HTML5 sollten Sie Probleme mit der Browserkompatibilität, einschließlich Desktop- und Mobilgeräten, berücksichtigen. Insbesondere bei Videos wird die Browserunterstützung für die Dekodierung unterschiedlich sein. Teilen Sie uns daher eine Verbesserung der Browserkompatibilität des HTML5-Video-Tags mit Ich muss darauf verweisen

In der Vergangenheit war Flash die beste Möglichkeit, Videos auf Webseiten zu lösen. Bis heute ist es immer noch Mainstream, beispielsweise auf Video-Websites wie Youku und Online-Musik wie Xiami. Die Website verwendet weiterhin Flash, um Wiedergabedienste bereitzustellen. Diese Situation wird sich jedoch mit der Entwicklung von HTML5 ändern. Was Videos betrifft, hat HTML5 Video hinzugefügt, um die Funktion der Online-Wiedergabe von Videos zu realisieren.

Mit HTML5-Video können Sie ganz einfach JavaScript verwenden, um den Videoinhalt usw. zu steuern. Die Funktion ist sehr leistungsstark und der Code ist relativ klein, um die Ladegeschwindigkeit 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 des Urheberrechtsproblems des Encoders weisen verschiedene Browser unterschiedliche Kompatibilität mit Videoformaten auf. 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 im WebM-Format Video, dies kann in 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 ausländisches Tool, den Online-Konverter, ein kostenloses Online-Videokonvertierungstool. Sie müssen nicht einmal die Software installieren, sondern einfach das entsprechende Zielformat auswählen, dann das Video hochladen, die Parameter konfigurieren 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. Im Folgenden werde ich den spezifischen Code direkt angeben und ihn dann kurz erläutern:

XML/HTML Code复制内容到剪贴板
<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” />  
    你浏览器不支持 video 功能，点击这里下载视频： <a href=”video.webm”>下载视频</a>.   
</video>

• 
  

Video-Tag gibt an, dass es sich um ein Video handelt, und die Breiten- und Höhen-

Attribute geben jeweils die Breite und Höhe (Einheitspixel) dieses Videoinhalts an. Das Video-Tag kann das Quell-Tag enthalten, um das durch referenzierte Video sowie das Format und den Typ des Videos anzugeben. 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 Host 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 in die .htaccess-Datei einfügen:
Der Code lautet wie folgt:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Das ist ungefähr, relativ einfach , genauer zum Video Um es zu verwenden, können Sie

suchen
, oder Sie können den erweiterten Leselink in diesem Artikel sehen, den ich hier nicht wiederholen werde.

Schritt 3: Kompatibilität für alte Browser herstellenWie bereits erwähnt: Wenn der Browser kein Video unterstützt, wird es angezeigt den Inhalt der Aufforderung im Video. 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:

kann gemäß der ursprünglichen normalen Flash-Einführungsmethode direkt in das Video-Tag geschrieben werden. Auf diese Weise haben wir eine browserübergreifende kompatible Nutzung der Videofunktionen erreicht

<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&amp;file=video.flv" />  
</object>  
</video>

[Verwandte Empfehlungen]

1. Detaillierte Erläuterung der Video-Tag-Testanwendung von HTML5

2.Verwendung des Videoelements in HTML 5 zum Erstellen eines Videoplayers

3 . Teilen Sie das Problem und die Lösung, dass das Video-Tag keine MP4-Dateien abspielen kann

4 Die Lösung für das Problem, dass das H5-Video-Tag nur Ton abspielen kann aber nicht Video

5. Der MIME von IIS registriert den MP4-Typ nicht, was zur Lösung führt, dass das Vidoe-Tag nicht erkannt werden kann

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Plans zur Verbesserung der Browserkompatibilität für HTML5-Video-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!