Comment insérer une vidéo en HTML et être compatible avec tous les navigateurs_HTML/Xhtml_Web production de pages

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 :

Copiez le code

Le code est le suivant :

Actuellement, l'élément vidéo 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 être conforme aux trois exigences détaillées ci-dessus, telles que MPEG 4, qui doit être H. 264 vidéo 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 accompagner :

Copiez le code

Le code est le suivant :

Certains fichiers sont présentés ici, à l'exception de The la vidéo au format flv, ainsi que plusieurs fichiers swf ou js, sont tous générés avec le logiciel DW. Les amis qui ne souhaitent pas étudier la balise peuvent simplement accéder au logiciel DW pour la générer. S'il peut être combiné intelligemment

Avec ces deux morceaux de code, vous pouvez obtenir le code final 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 IE peut ne pas transmettre de versions supérieures pour des raisons de serveur , donc pour le moment, utilisez < pour toutes les balises IE ;object>), chargez différentes balises selon la version, le code est le suivant :

Copier le code Le code est le suivant :

<script> <br>if($.browser.msie){ <br>document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width= "624" height="351" style="margin-top: -10px;margin-left: -8px;" id="FLVPlayer1">' <br>'<param name="movie" value="FLVPlayer_Progressive .swf" />' <br>'<param name="qualité" value="high" /> <br>'<param name="wmode" value="opaque" />' 🎜>'<param name="scale" value="noscale" />' <br>'<param name="salign" value="lt" /> <br>'<param name= "FlashVars" value="&MM_ComponentVersion=1&skinName=public/swf/Clear_Skin_3&streamName=public/video/test&autoPlay=false&autoRewind=false" />' <br>'<param name=" swfversion" value="8,0,0,0" />' <br>'<!-- Cette balise param invite les utilisateurs utilisant Flash Player 6.0 r65 et versions ultérieures à télécharger la dernière version de Flash Player. Si vous vous ne voulez pas que les utilisateurs voient cette invite, veuillez la supprimer -->' <br>'<param name="expressinstall" value="expressInstall.swf" /> <br>'</ object> '); <br>}else{ <br>document.write('<video width="602px" height="345px" CONTROLS="controls">' <br>'<source src=" public/ video/test.mp4" type="video/mp4"></source>' <br>'<source src="public/video/test.ogg" type="video/ogg"> < /source>' <br>'votre navigateur ne prend pas en charge la balise vidéo' <br>'</video>' <br>} <br></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.