Insérez une vidéo dans HTML et soyez compatible avec le navigateur

Cet article présente principalement le style du bouton de case à cocher vert personnalisé CSS, qui a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Insérer une vidéo dans HTML Il existe deux méthodes. , l'une est l'ancienne balise d'objet et l'autre est la balise vidéo en HTML5. La première a une compatibilité relativement meilleure, tandis que la compatibilité de la seconde est un casse-tête

Le moyen le plus couramment utilisé pour insérer des vidéos dans HTML. deux méthodes, l'une est l'ancienne balise et l'autre est la balise
Le premier a une compatibilité, mais il n'est pas très pratique à utiliser. Le second est très pratique à utiliser, mais la compatibilité est un casse-tête.
Bien qu'il y ait de nombreux problèmes avec la compatibilité de ce dernier, parce qu'il est très pratique à utiliser et conforme à la tendance de développement du futur web design, nous utilisons ce dernier comme principale méthode d'insertion de vidéos, et en raison de sa compatibilité questions, le premier est utilisé en complément.
Un exemple est le suivant :

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

Actuellement, l'élément vidéo prend en charge trois formats vidéo :
Format IE Firefox Opera Chrome Safari
Ogg Non 3.5+ 10.5+ 5.0+ Non
MPEG 4 9.0+ Non Non 5.0+ 3.0+
WebM Non 4.0+ 10.6+ 6.0+ Non
Ogg = Fichier Ogg avec encodage vidéo Theora et encodage audio Vorbis
MPEG4 = avec encodage vidéo H.264 et encodage audio AAC Fichiers MPEG 4
WebM = Fichiers WebM avec encodage vidéo VP8 et encodage audio Vorbis
Remarque : Le format doit répondre aux trois exigences détaillées ci-dessus, telles que MPEG 4, qui doit être une vidéo H.264 et Audio AAC.
Dans ce cas, si le format vidéo est correct, nous sommes assez satisfaits des résultats de compatibilité de la plupart des navigateurs, mais IE678 ne le supporte pas, et leurs utilisateurs constituent encore un très grand groupe en Chine, il faut donc penser à Une autre solution les prend en charge :

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

Cela introduit certains fichiers. En plus des vidéos au format flv, il existe également plusieurs fichiers swf ou js, tous générés avec le logiciel DW que je ne souhaite pas étudier. Pour ceux qui aiment la balise object, accédez simplement au logiciel DW pour la générer. Si vous pouvez intégrer intelligemment les deux morceaux de code, vous pouvez obtenir le code ultime compatible avec tous les navigateurs grand public. .
Nous pouvons donc faire ceci :
Utilisez jquery pour déterminer si le navigateur est IE (il n'est pas nécessaire de déterminer la version spécifique d'IE, car les versions supérieures d'IE peuvent ne pas passer pour des raisons de serveur. Pour le moment , tous les IE utilisent la balise