Comment insérer une vidéo en HTML et être compatible avec tous les navigateurs

Cet article présente principalement la méthode d'insertion de vidéo dans HTML et est compatible avec tous les navigateurs. Il 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 façons d'insérer des vidéos, 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

Le plus. La méthode couramment utilisée consiste à insérer dans HTML. Il existe deux méthodes de vidéo, 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 :

Copier le code

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, vidéo L'élément prend en charge trois formats vidéo :
Format IE Firefox Opera Chrome Safari
Ogg No 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 = 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 doit répondre aux trois exigences détaillées ci-dessus, telles que MPEG 4, qui doit être une vidéo H.264 et un 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 accompagner :

Copiez le code

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="&MM_ComponentVersion=1&skinName=public/swf/Clear_Skin_3&streamName=public/video/test&autoPlay=false&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 présentés ici En plus des vidéos au format flv, il existe également plusieurs fichiers swf ou js, qui sont tous générés avec le logiciel DW. Les amis qui ne souhaitent pas étudier l' peut simplement utiliser le logiciel DW pour les générer, si vous pouvez fusionner intelligemment ces deux morceaux de code
, vous pouvez obtenir le code ultime compatible avec tous les principaux navigateurs.
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

Copiez le code

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="&MM_ComponentVersion=1&skinName=public/swf/Clear_Skin_3&streamName=public/video/test&autoPlay=false&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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!