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. |
Artikel empfehlen
Füllen Sie die Suchfunktion auf der HTML-Seite aus
Ich habe kürzlich an einem Framework gearbeitet, ...
Layout im Vue.js-Stil Allgemeine Fähigkeiten zur Flutter-Geschäftsentwicklung
Korrespondenz zwischen Flutter und CSS im Shadow-...
js implementiert einen einfachen Rechner
Verwenden Sie natives JS, um einen einfachen Rech...
Vues einfacher Implementierungsprozess zur Nachahmung der NetEase Cloud Music Player-Schnittstelle
Aufgrund der Anforderungen des Arbeitsprojekts is...
So implementieren Sie das Prototypmuster in JavaScript
Überblick Das Prototypmuster bezieht sich auf den...
Umgang mit Leerzeichen in CSS
1. Weltraumregeln Leerzeichen im HTML-Code werden...
Detailliertes Verständnis der Vue-Methode zum Generieren von QR-Codes mit vue-qr
Inhaltsverzeichnis npm herunterladen Schritt (1) ...
Detaillierte Erklärung des CSS3-Rotationswürfelproblems
3D-Koordinatenkonzept Wenn sich ein Element dreht...
Reines CSS, um einen bewölkten Wettersymboleffekt zu erzielen
Wirkung Die Wirkung ist wie folgt Umsetzungside...
Beispielerklärung für Ausführungskontext und Ausführungsstapel in JavaScript
JavaScript - Prinzipienreihe Wenn wir in der tägl...
Detaillierte Erläuterung des Shared-Memory-Mechanismus von Nginx
Der gemeinsam genutzte Speicher von Nginx ist ein...
So installieren Sie CentOS8 in VMware12 (Tutorial zur Installation von CentOS8 in einer virtuellen VM-Maschine)
CentOS8 wurde vor ein paar Tagen veröffentlicht. ...
MySQL 5.7.12 Installations- und Konfigurations-Tutorial unter Mac OS 10.11
So installieren und konfigurieren Sie MySQL auf M...
Wenn catalina.bat in Tomcat auf UTF-8 eingestellt ist, werden auf der Konsole verstümmelte Zeichen angezeigt
1. catalina.bat muss auf UTF-8 eingestellt sein. ...
Der Effekt des Heranzoomens in einem Taobao-Shop ähnelt dem Prinzip einer Diashow.
Heute habe ich den Mauszoom-Effekt auf der Vorders...