Fügen Sie Videos in HTML ein und kompatibel mit allen Browsern

Es gibt zwei Möglichkeiten, Videos in HTML 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 ein Problem mit der Kompatibilität darstellt. Es gibt zwei am häufigsten verwendete Methoden zum Einfügen von Videos in HTML: eine ist das alte -Tag und die andere ist das -Tag.

Ersteres ist kompatibel, aber nicht sehr bequem zu verwenden. Letzteres ist sehr bequem zu verwenden, aber die Kompatibilität bereitet Kopfschmerzen.

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 als Hauptmethode zum Einfügen von Videos Aufgrund seiner Kompatibilitätsprobleme wird ersteres als Hilfsgerät verwendet.

Ein Beispiel lautet wie folgt:
Der 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:
Format 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 = mit Theora-Videokodierung und Ogg-Datei mit 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 die drei oben genannten detaillierten Anforderungen erfüllen, 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ß Ich muss mir eine andere Lösung überlegen, um sie zu unterstützen:

Der 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>

Einige Dateien werden hier vorgestellt, zusätzlich zu Videos im FLV-Format gibt es auch Mehrere SWF- oder JS-Dateien werden alle mit der DW-Software generiert. Wenn Sie die -Tags nicht studieren möchten, gehen Sie einfach zur DW-Software, um sie zu generieren Code

, Sie können den ultimativen Code für alle gängigen Browser erhalten.

So können wir Folgendes tun:

Verwenden Sie jquery, um festzustellen, ob es sich bei dem Browser um den IE handelt (Sie müssen die spezifische IE-Version nicht ermitteln, da der IE aufgrund des Servers höhere Versionen möglicherweise nicht weiterleitet Aus diesem Grund verwenden Sie vorerst < für alle IE ;object>-Tags. Laden Sie je nach Version unterschiedliche Tags. Der Code lautet wie folgt:
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-Videocode schreiben, der mit allen Browsern kompatibel ist.

Weitere verwandte Artikel zum Einfügen von Videos in HTML und zur Kompatibilität mit allen Browsern finden Sie auf der chinesischen PHP-Website!