Fügen Sie Videos in HTML ein und seien Sie browserkompatibel

In diesem Artikel wird hauptsächlich der Stil der benutzerdefinierten grünen CSS-Kontrollkästchen-Schaltfläche vorgestellt, die einen bestimmten Referenzwert hat. Jetzt können Freunde in Not darauf verweisen.

Video in HTML einfügen. Es gibt zwei Methoden , eines ist das alte Objekt-Tag und das andere ist das Video-Tag in HTML5. Ersteres ist relativ besser kompatibel, während letzteres ein Problem darstellt.

Die am häufigsten verwendete Methode zum Einfügen von Videos in HTML zwei Methoden, 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 aufgrund seiner Kompatibilität als Hauptmethode zum Einfügen von Videos Probleme, ersteres wird als Ergänzung verwendet.
Ein Beispiel 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 = Ogg-Datei mit Theora-Videokodierung und Vorbis-Audiokodierung
MPEG4 = mit H.264-Videokodierung und AAC Audiokodierte MPEG 4-Datei
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, das H.264-Video und AAC sein muss Audio.
Wenn in diesem Fall das Videoformat korrekt ist, sind wir mit den Kompatibilitätsergebnissen der meisten Browser recht zufrieden, aber IE678 unterstützt es nicht und ihre Benutzer sind in China immer noch eine sehr große Gruppe, also müssen wir darüber nachdenken Eine andere Lösung unterstützt sie:

<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 DW-Software generiert wurden ; Für Freunde mit dem Tag gehen Sie einfach zur DW-Software, um es zu generieren. Wenn Sie diese beiden Codeteile geschickt zusammenführen können, erhalten Sie den ultimativen Code, der mit allen gängigen Browsern kompatibel ist.
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 das Tag . Laden Sie je nach Version unterschiedliche Tags. Der Code lautet wie folgt:

<script>  
if($.browser.msie){ 
document.write('<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>'); 
}else{ 
document.write('<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>'); 
} 
</script>

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

An dieser Stelle können Sie ein HTML-Video schreiben, das mit allen Browsercodes kompatibel ist.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

HTML5-Implementierung von Playern, die mit den wichtigsten Browsern kompatibel sind

Über H5 neue Attribute Audio Audio und Video Videosteuerungsanalyse

So realisieren Sie die automatische Wiedergabe von HTML5-Seiten-Audio und -Video unter WeChat und der App

Das obige ist der detaillierte Inhalt vonFügen Sie Videos in HTML ein und seien Sie browserkompatibel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!