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

Dieser Artikel stellt hauptsächlich die Methode zum Einfügen von Videos in HTML vor und ist mit allen Browsern kompatibel. Jetzt kann ich ihn mit Ihnen teilen.

Video einfügen HTML Es gibt zwei Möglichkeiten, Videos einzufügen, eine ist das alte Objekt-Tag und die andere ist das Video-Tag in HTML5. Ersteres weist eine relativ bessere Kompatibilität auf, während letzteres eine Kompatibilität aufweist, die am meisten Kopfschmerzen bereitet Die am häufigsten verwendete Methode ist das Einfügen in HTML. Es gibt zwei Methoden für Videos, eine ist das alte -Tag und die andere ist das -Tag.

Obwohl es viele Probleme mit der Kompatibilität des letzteren gibt, da es sehr bequem zu verwenden ist und dem Entwicklungstrend des zukünftigen Webdesigns entspricht, verwenden wir Letzteres aufgrund seiner Kompatibilität als Hauptmethode zum Einfügen von Videos Probleme, ersteres wird als Ergänzung verwendet.
Ein Beispiel lautet wie folgt:

Kopieren Sie den CodeDer Code lautet wie folgt:

<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> 
your browser does not support the video tag 
</video>

Derzeit unterstützt das Videoelement drei Videoformate:

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-Videokodierung und Vorbis-Audiokodierung

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

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

Hinweis: Das Format muss den oben genannten drei detaillierten Anforderungen entsprechen, z. B. MPEG 4, bei dem es sich um H.264-Video und AAC-Audio handeln muss.

Wenn das Videoformat in diesem Fall korrekt ist, sind wir mit den Kompatibilitätsergebnissen der meisten Browser recht zufrieden, aber IE678 unterstützt es nicht und ihre Benutzergruppe ist in China immer noch sehr groß muss sich eine andere Lösung überlegen, um sie zu unterstützen:

Kopieren Sie den CodeDer Code lautet wie folgt:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="624" height="351" style="margin-top: -10px;margin-left: -8px;" id="FLVPlayer1"> 
<param name="movie" value="FLVPlayer_Progressive.swf" /> 
<param name="quality" value="high" /> 
<param name="wmode" value="opaque" /> 
<param name="scale" value="noscale" /> 
<param name="salign" value="lt" /> 
<param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=public/swf/Clear_Skin_3&amp;streamName=public/video/test&amp;autoPlay=false&amp;autoRewind=false" /> 
<param name="swfversion" value="8,0,0,0" /> 
<!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 --> 
<param name="expressinstall" value="expressInstall.swf" /> 
</object>

Hier werden neben Videos im FLV-Format auch mehrere SWF- oder JS-Dateien vorgestellt, die alle mit der DW-Software erstellt wurden ;/object>-Tag kann einfach zur DW-Software gehen, um es zu generieren. Sie können diese beiden Codeteile geschickt kombinieren

So können wir Folgendes tun:
Verwenden Sie jquery, um festzustellen, ob es sich bei dem Browser um einen IE handelt (es ist nicht erforderlich, die spezifische IE-Version zu ermitteln, da höhere Versionen des IE aus Servergründen möglicherweise nicht funktionieren. Vorerst , alle IE verwenden Tag), laden je nach Version unterschiedliche Tags, der Code lautet wie folgt:

Kopieren Sie den Code Der Code lautet wie folgt:

<script> 
if($.browser.msie){ 
document.write(&#39;<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="624" height="351" style="margin-top: -10px;margin-left: -8px;" id="FLVPlayer1">&#39;+ 
&#39;<param name="movie" value="FLVPlayer_Progressive.swf" />&#39;+ 
&#39;<param name="quality" value="high" />&#39;+ 
&#39;<param name="wmode" value="opaque" />&#39;+ 
&#39;<param name="scale" value="noscale" />&#39;+ 
&#39;<param name="salign" value="lt" />&#39;+ 
&#39;<param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=public/swf/Clear_Skin_3&amp;streamName=public/video/test&amp;autoPlay=false&amp;autoRewind=false" />&#39;+ 
&#39;<param name="swfversion" value="8,0,0,0" />&#39;+ 
&#39;<!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 -->&#39;+ 
&#39;<param name="expressinstall" value="expressInstall.swf" />&#39;+ 
&#39;</object>&#39;); 
}else{ 
document.write(&#39;<video width="602px" height="345px" controls="controls">&#39;+ 
&#39;<source src="public/video/test.mp4" type="video/mp4"></source>&#39;+ 
&#39;<source src="public/video/test.ogg" type="video/ogg"></source>&#39;+ 
&#39;your browser does not support the video tag&#39;+ 
&#39;</video>&#39;); 
} 
</script>

Vergessen Sie nicht, die JQuery-Datei einzuführen, bevor Sie diesen Code schreiben

An diesem Punkt können Sie HTML schreiben Videocode, der mit allen Browsern kompatibel ist.

Das obige ist der detaillierte Inhalt vonSo fügen Sie Videos in HTML ein und sind mit allen Browsern kompatibel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!