Erfahren Sie, wie Sie die Browserkompatibilität von Video-Tags in H5 verbessern

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, 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 fremdes 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-CodeInhalt in die Zwischenablage kopieren

<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 Das Tag gibt an, dass es sich um ein Video handelt, und die Attribute width und height geben jeweils die Breite und Höhe (Einheitspixel) des 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 alles, relativ einfach und mehr Um mehr über die Verwendung von Videos zu erfahren, können Sie

durchsuchen oder den erweiterten Leselink in diesem Artikel sehen, den ich hier nicht wiederholen werde.

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. Beispiel:

XML/HTML Code复制内容到剪贴板
<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>

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

【Verwandte Empfehlungen】

1. HTML/CSS-kostenloses Video-Tutorial

2. Detaillierte Erklärung der HTML5-Videoanzeigestandards

3. Beschreiben Sie kurz die Parameter und Attribute des

5. Lernen Sie, wie Sie HTML5-Audio und -Video verwenden

Das obige ist der detaillierte Inhalt vonErfahren Sie, wie Sie die Browserkompatibilität von Video-Tags in H5 verbessern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!