Teilen von Plänen zur Verbesserung der Browserkompatibilität des Video-Tags in HTML5

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 Wenn Sie es benötigen, können Sie darauf verweisen

In der Vergangenheit war Flash die beste Möglichkeit, Videos auf Webseiten aufzulösen. Heutzutage 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, 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 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 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. Ich empfehle ein fremdes Tool namens Online Converter, ein kostenloses Online-Videokonvertierungstool. 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” />  
    你浏览器不支持 video 功能，点击这里下载视频： <a href=”video.webm”>下载视频</a>.   
</video>

Das Video-Tag zeigt an, dass es sich um ein Video handelt, und die Attribute width und height geben jeweils die Breite und Höhe (Einheitspixel) des Videos an Videoinhalte. 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 der .htaccess-Datei die folgende Anweisung hinzufügen:

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

Das ist alles, es ist relativ einfach. Sie können nach genaueren Anweisungen zur Verwendung von Videos suchen Weiterführende Links werden hier nicht wiederholt.

Schritt 3: Kompatibilität für alte Browser herstellen

Wie 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. Beispielsweise kann

<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>

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 Videofunktion erreicht.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist zur chinesischen PHP-Website!

Verwandte Empfehlungen:

Über die Kontrollanalyse der neuen H5-Attribute Audio und Video

HTML5 Methode zur Implementierung des Vollbildmodus (fullScreen) des Videoplayers

HTML5 Wiedergabesteuerung des Video-Tags

Das obige ist der detaillierte Inhalt vonTeilen von Plänen zur Verbesserung der Browserkompatibilität des Video-Tags in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!