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

Beispiel für die Installation von nginx in einem angegebenen Verzeichnis

Aufgrund von Unternehmensanforderungen müssen zwe...

Detailliertes Tutorial zur Verwendung von stimulsoft.reports.js mit vue-cli

vue-cli verwendet stimulsoft.reports.js (Tutorial...

MySQL-Datenbank-JDBC-Programmierung (Java stellt eine Verbindung zu MySQL her)

Inhaltsverzeichnis 1. Grundvoraussetzungen für di...

Die Umsetzung von Youdas neuem Petite-Vue

Inhaltsverzeichnis Vorwort Einführung Live Einfac...

So fügen Sie einer Tabelle in SQL Felder und Kommentare hinzu

1. Felder hinzufügen: Tabelle Tabellennamen änder...

Webdesign: Skriptmaterialien rekonstruieren das Benutzererlebnis

<br />Originaltext: http://blog.rexsong.com/...

Installationshinweise zur komprimierten Version von MySQL 5.7.17

In diesem Artikel werden die Installationsschritt...

jQuery implementiert Formularvalidierungsfunktion

Beispiel für die Validierung eines jQuery-Formula...

Interner Ereignisrückruf der Webkomponentenkomponente und Problempunktanalyse

Inhaltsverzeichnis Vorne geschrieben Was genau is...

Lösung für vergessenes Linux MySQL-Root-Passwort

Wenn Sie sich bei der Verwendung der MySQL-Datenb...

Absteigender Index in MySQL 8.0

Vorwort Ich glaube, jeder weiß, dass Indizes geor...