Insérez la vidéo en HTML et compatible avec tous les navigateurs

Il existe deux façons d'insérer des vidéos dans HTML, l'une est la balise d'objet ancienne et l'autre est la balise vidéo en html5. La première a une compatibilité relativement meilleure, tandis que la seconde a une compatibilité qui est un casse-tête. Il existe deux méthodes les plus couramment utilisées pour insérer des vidéos dans HTML, 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, car il est très pratique à utiliser et conforme à la tendance de développement de la future conception de sites Web, nous utilisons ce dernier comme principale méthode d'insertion de vidéos. ses problèmes de compatibilité, le premier est utilisé comme auxiliaire.

Un exemple est le suivant :
Le code 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 audio Vorbis encodage

MPEG4 = fichier MPEG 4 avec encodage vidéo H.264 et encodage audio AAC

WebM = fichier WebM avec encodage vidéo VP8 et encodage audio Vorbis

Remarque : Le format est requis Se conformer aux trois exigences détaillées ci-dessus, telles que MPEG 4, doit être 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 prend pas en charge, et leurs utilisateurs constituent toujours un très grand groupe en Chine. il faut penser à une autre solution pour les supporter :

Le code est le suivant :

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

Certains fichiers sont introduits ici, en plus des vidéos au format flv, il y a aussi plusieurs fichiers swf ou js sont tous générés à l'aide du logiciel DW. Si vous ne souhaitez pas étudier les balises , accédez simplement au logiciel DW pour les générer. Si vous pouvez intégrer intelligemment les deux éléments de. code

, vous pouvez obtenir la compatibilité Le code ultime pour tous les principaux navigateurs.

Nous pouvons donc faire ceci :

Utilisez jquery pour déterminer si le navigateur est IE (vous n'avez pas besoin de déterminer la version spécifique d'IE, car IE peut ne pas transmettre les versions supérieures en raison du serveur raisons, pour le moment, utilisez < pour toutes les balises IE ;object>), chargez différentes balises selon la version, le code est le suivant :
Le code est le suivant :

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

N'oubliez pas d'introduire le fichier jquery avant d'écrire ce code

À ce stade, vous pouvez écrire du code vidéo HTML compatible avec tous les navigateurs.

Pour plus d'articles sur l'insertion de vidéos dans HTML et la compatibilité avec tous les navigateurs, veuillez faire attention au site Web PHP chinois !