So fügen Sie Videos in HTML ein und machen sie mit allen Browsern kompatibel

So fügen Sie Videos in HTML ein und machen sie mit allen Browsern kompatibel
Zum Einfügen von Videos in HTML werden am häufigsten zwei Methoden verwendet: eine ist das alte Tag <object></object> und die andere ist das Tag <video></video> in HTML5.

Die Kompatibilität des ersteren ist einwandfrei, aber die Verwendung ist nicht sehr bequem. Letzteres ist sehr bequem zu verwenden, aber die Kompatibilität bereitet Kopfschmerzen.

Obwohl letzteres viele Kompatibilitätsprobleme aufweist, ist es sehr bequem zu verwenden und entspricht dem zukünftigen Entwicklungstrend des Webdesigns. Daher verwenden wir letzteres als Hauptmethode zum Einfügen von Videos. Aufgrund seiner Kompatibilitätsprobleme wird ersteres als Hilfsmethode verwendet.

Hier ist ein Beispiel:

Code kopieren
Der Code lautet wie folgt:

<video Breite="602px" Höhe="345px" Steuerung="Steuerung">
<Quelle src="public/video/test.mp4" Typ="video/mp4"></Quelle>
<Quelle src="public/video/test.ogg" Typ="video/ogg"></Quelle>
Ihr Browser unterstützt das Video-Tag nicht
</video>

Derzeit unterstützt das Videoelement drei Videoformate:
Formatieren Sie IE Firefox Opera Chrome Safari
Ogg Nein 3.5+ 10.5+ 5.0+ Nein
MPEG 4 9.0+ Nein Nein 5.0+ 3.0+
WebM Nein 4.0+ 10.6+ 6.0+ Nein

Ogg = Ogg-Datei mit Theora-Videocodec und Vorbis-Audiocodec

MPEG4 = MPEG 4-Dateien mit H.264-Videokodierung und AAC-Audiokodierung

WebM = WebM-Dateien mit VP8-Videokodierung und Vorbis-Audiokodierung

Hinweis: Das Format muss die drei oben aufgeführten Anforderungen erfüllen, beispielsweise MPEG 4, es muss sich um H.264-Video und AAC-Audio handeln.

In diesem Fall sind wir mit den Kompatibilitätsergebnissen der meisten Browser zufrieden, wenn das Videoformat korrekt ist. Allerdings wird es von IE678 nicht unterstützt und in China sind die Benutzer noch immer sehr groß. Daher müssen wir uns eine andere Lösung zur Unterstützung überlegen:

Code kopieren
Der Code lautet wie folgt:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="624" height="351" style="Rand oben: -10px;Rand links: -8px;" id="FLVPlayer1">
<param name="Film" value="FLVPlayer_Progressive.swf" />
<param name="Qualität" value="hoch" />
<param name="wmode" value="undurchsichtig" />
<param name="Skala" value="keine Skalierung" />
<param name="salign" value="lt" />
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=public/swf/Clear_Skin_3&streamName=public/video/test&autoPlay=false&autoRewind=false" />
<param name="swfversion" value="8,0,0,0" />
<!-- Dieser Param-Tag fordert Benutzer von Flash Player 6.0 r65 und höher auf, die neueste Version von Flash Player herunterzuladen. Wenn Sie nicht möchten, dass Benutzer diese Eingabeaufforderung sehen, entfernen Sie sie. -->
<param name="expressinstall" value="expressInstall.swf" />
</Objekt>

Hier werden einige Dateien vorgestellt. Neben dem Video im FLV-Format gibt es auch mehrere SWF- oder JS-Dateien, die alle von der DW-Software generiert werden. Freunde, die die Tags <object></object> nicht studieren möchten, können sie mit der DW-Software generieren. Wenn Sie geschickt integrieren können

Mit diesen beiden Codeteilen erhalten Sie den ultimativen Code, der mit allen gängigen Browsern kompatibel ist.

Wir können also Folgendes tun:

Verwenden Sie jQuery, um zu bestimmen, ob es sich bei dem Browser um den Internet Explorer handelt (die genaue IE-Version muss nicht bestimmt werden, da der Server die höhere IE-Version möglicherweise nicht weitergibt. Vorübergehend verwenden alle IE die Tags <object></object>). Laden Sie je nach Version unterschiedliche Tags. Der Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<Skript>
wenn($.browser.msie){
Dokument.schreiben('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="624" height="351" style="margin-top: -10px;margin-left: -8px;" id="FLVPlayer1">'+
'<param name="Film" value="FLVPlayer_Progressive.swf" />'+
'<param name="Qualität" Wert="hoch" />'+
'<param name="wmode" value="undurchsichtig" />'+
'<param name="scale" value="noscale" />'+
'<param name="salign" value="lt" />'+
'<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=public/swf/Clear_Skin_3&streamName=public/video/test&autoPlay=false&autoRewind=false" />'+
'<param name="swfversion" value="8,0,0,0" />'+
'<!-- Dieser Param-Tag fordert Benutzer von Flash Player 6.0 r65 und höher auf, die neueste Version von Flash Player herunterzuladen. Wenn Sie nicht möchten, dass Benutzer diese Eingabeaufforderung sehen, entfernen Sie sie. -->'+
'<param name="expressinstall" value="expressInstall.swf" />'+
'</Objekt>');
}anders{
Dokument.schreiben('<video width="602px" height="345px" controls="controls">'+
'<source src="public/video/test.mp4" type="video/mp4"></source>'+
'<source src="public/video/test.ogg" type="video/ogg"></source>'+
„Ihr Browser unterstützt das Video-Tag nicht“+
'</video>');
}
</Skript>

Vergessen Sie nicht, die jQuery-Datei zu importieren, bevor Sie diesen Code schreiben

An dieser Stelle können Sie HTML-Videocode schreiben, der mit allen Browsern kompatibel ist.

<<:  Allgemeine DIV-Aufgaben (Teil 1) – Allgemeine Aufgaben (Bildlaufleisten anzeigen/Divs ausblenden/Ereignis-Bubbling deaktivieren usw.)

>>:  Referenzieren Sie SVG-Bilder in CSS, um den Implementierungscode für dynamische Farbumschaltung zu unterstützen

Artikel empfehlen

Problem mit der Groß-/Kleinschreibung in der MySQL-Datenbank

In MySQL entsprechen Datenbanken Verzeichnissen i...

Mit CSS3 lässt sich ein umdrehbarer Hover-Effekt erzielen

CSS3 implementiert einen umdrehbaren Hover-Effekt...

Ein einfaches Beispiel für die MySQL-Suche nach Daten im Umkreis von N Kilometern

Gemäß dem Koeffizienten von Pi und dem Radius der...

Faint: „Nutzen Sie Web 2.0, um standardkonforme Seiten zu erstellen“

Heute sprach jemand mit mir über ein Website-Entw...

JavaScript zum Erzielen des JD.com-Blitzverkaufseffekts

In diesem Artikel wird der spezifische JavaScript...

Detailliertes Beispiel für das Datenbankbetriebsobjektmodell in Spring jdbc

Detailliertes Beispiel für das Datenbankbetriebso...

5 Dinge, die beim Schreiben von React-Komponenten mit Hooks zu beachten sind

Inhaltsverzeichnis 01. Verwenden Sie useState, we...

Beitrag zur Übermittlung von HTML-Daten_PowerNode Java Academy

Zu den vom HTTP/1.1-Protokoll angegebenen HTTP-An...

Lösung - BASH: /HOME/JAVA/JDK1.8.0_221/BIN/JAVA: Unzureichende Berechtigungen

1) Geben Sie den Ordnerpfad ein, in dem die JDK-D...