Maison  >  Article  >  interface Web  >  Insérez une vidéo dans HTML et soyez compatible avec le navigateur

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

不言
不言original
2018-06-12 10:07:141253parcourir

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 ), chargez différentes balises selon la version, le code est le suivant :

<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>
N'oubliez pas d'introduire le fichier jquery avant d'écrire ce code

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

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Implémentation HTML5 de lecteurs compatibles avec les principaux navigateurs

À propos des nouveaux attributs audio et vidéo de H5 Analyse du contrôle vidéo

Comment réaliser la lecture automatique de l'audio et de la vidéo d'une page HTML5 sous WeChat et l'application

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn