Vous apprendre à améliorer la compatibilité des navigateurs avec les balises vidéo dans H5

Lorsque vous utilisez HTML5, vous devez prendre en compte les problèmes de compatibilité des navigateurs, y compris les ordinateurs de bureau et les mobiles. En particulier pour les vidéos, la prise en charge du décodage par le navigateur sera différente, partageons donc une amélioration de la compatibilité du navigateur de la balise vidéo HTML5, amis qui. si besoin, vous pouvez vous y référer

Dans le passé, le flash était le meilleur moyen de résoudre des vidéos sur des pages Web. À l'heure actuelle, il est toujours courant, comme les sites Web de vidéos comme Youku et de musique en ligne comme Xiami. Le site Web utilise toujours Flash pour fournir des services de lecture. Mais cette situation va changer avec le développement du HTML5. En ce qui concerne les vidéos, HTML5 a ajouté vidéo pour réaliser la fonction de lecture de vidéos en ligne.

En utilisant la vidéo HTML5, vous pouvez facilement utiliser JavaScript pour contrôler le contenu vidéo, etc. La fonction est très puissante et le code est relativement petit pour accélérer la vitesse de chargement. De plus, le multiplateforme est relativement bon, en particulier certaines tablettes, téléphones mobiles, etc. Par exemple, les produits Apple ne prennent pas en charge Flash et ne prennent en charge que la fonction vidéo en HTML5.

Cependant, le problème de compatibilité du HTML5 est un défaut. Nous pouvons utiliser la vidéo pour lire des vidéos sur des pages Web, mais les visiteurs utilisant les premiers navigateurs peuvent ne pas pouvoir regarder cette vidéo normalement. De plus, en raison de l’origine historique des encodeurs vidéo, différents navigateurs prennent en charge différents formats vidéo. Pour résoudre ces problèmes, si vous souhaitez utiliser la fonction vidéo HTML5 dans une page Web, vous pouvez suivre les trois étapes suivantes.

Première étape : Préparez les fichiers vidéo multiformats à l'avance

En raison du problème de droits d'auteur de l'encodeur, différents navigateurs ont une compatibilité différente avec les formats vidéo. Actuellement, aucun format vidéo n’est compatible avec tous les navigateurs, et la seule solution consiste à convertir la vidéo en plusieurs formats.

Premièrement, préparez une vidéo au format mp4, qui peut être utilisée sur les appareils Apple ; deuxièmement, préparez une vidéo au format ogv, qui peut être utilisée dans Firefox ; au format webm Vidéo, cela peut être utilisé dans Google Chrome, etc. Webm a été proposé par Google. Il est open source, gratuit et est susceptible de devenir un format vidéo compatible avec tous les navigateurs.

Le problème avec la préparation d'un navigateur multi-format est la conversion des formats. Les outils de conversion vidéo nationaux ont relativement peu de fonctions, le format de conversion peut ne pas être aussi bon que les deux derniers ci-dessus, la qualité varie et un enregistrement est souvent requis avant utilisation. Je recommande un outil étranger appelé Online Converter, un outil de conversion vidéo en ligne gratuit. Vous n'avez même pas besoin d'installer le logiciel, il suffit de sélectionner le format cible correspondant, puis de télécharger la vidéo, de configurer les paramètres et vous pourrez la convertir. Si vous ne disposez pas des bons outils, vous pouvez essayer.

Étape 2 : Écrivez le code vidéo HTML5 correspondant

La vidéo en HTML5 est en fait une simple balise qui contient des informations liées à la vidéo. Ci-dessous, je vais donner directement le code spécifique puis l'expliquer brièvement :

Code XML/HTMLCopier le contenu dans le presse-papiers

<video width=”800” height=”374”>  
    <source src=”my_video.mp4” type=”video/mp4” />  
    <source src=”my_video.ogv” type=”video/ogg” />  
    <source src=”my_video.webm” type=”video/webm” />  
    你浏览器不支持 video 功能，点击这里下载视频： <a href=”video.webm”>下载视频</a>.   
</video>

vidéo La balise indique qu'il s'agit d'une vidéo, et les attributs width et height indiquent respectivement la largeur et la hauteur (pixel unité) du contenu vidéo. La balise vidéo peut contenir la balise source, qui sert à indiquer la vidéo référencée par ainsi que le format et le type de la vidéo. Afin d'assurer la compatibilité descendante, nous avons également ajouté une invite dans la balise vidéo. Cette phrase ne sera pas affichée dans les navigateurs prenant en charge la balise vidéo. Si elle n'est pas prise en charge, elle sera affichée. Ici, une adresse de téléchargement vidéo est également ajoutée. Si le navigateur ne la prend pas en charge, les utilisateurs peuvent choisir de la télécharger et de la regarder. Une chose à noter en particulier est que votre hébergeur doit être capable de gérer correctement ces demandes de vidéos. Assurez-vous que votre hébergeur envoie le type MIME correct dans l'en-tête Content-Type lorsqu'il est demandé pour ces vidéos. Si vous n'êtes pas sûr, vous pouvez consulter le fournisseur de services d'hébergement ou l'ajouter vous-même. Si l'hébergeur prend en charge .htaccess, vous pouvez ajouter l'instruction suivante dans le fichier .htaccess :

Le code est le suivant :

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

C'est à peu près cela, relativement simple, et plus spécifique sur la façon d'utiliser la vidéo, vous pouvez

rechercher , ou vous pouvez voir le lien de lecture étendue dans cet article, que je ne répéterai pas ici.

Étape 3 : Assurer la compatibilité avec les anciens navigateurs

Comme mentionné précédemment, si le navigateur ne prend pas en charge la vidéo, il affichera le contenu de l'invite dans la vidéo. Ainsi, pour les anciens navigateurs, nous pouvons remplacer ce contenu d'invite par du flash traditionnel. De cette façon, lorsque le navigateur n'est pas compatible avec la balise vidéo, la version flash de la vidéo sera affichée. Par exemple :

XML/HTML Code复制内容到剪贴板
<video width=”800” height=”374”>  
    <source src=”my_video.mp4” type=”video/mp4” />  
    <source src=”my_video.ogv” type=”video/ogg” />  
<object width="800" height="374" type="application/x-shockwave-flash" data="fallback.swf">  
    <param name="movie" value="fallback.swf" />  
    <param name="flashvars" value="autostart=true&amp;file=video.flv" />  
</object>  
</video>

peut être directement écrit dans la balise vidéo selon la méthode d'introduction flash normale d'origine. De cette façon, nous avons obtenu une utilisation compatible avec tous les navigateurs de la fonction vidéo

【Recommandations associées】

1. Tutoriel vidéo gratuit html/css

2 Explication détaillée des normes d'affichage vidéo HTML5

3.

Décrivez brièvement les paramètres et les attributs de la balise

4

Analysez la raison pour laquelle la vidéo MP4 est dans la balise vidéo dans le H5. la page Web ne peut pas être lue

5

Vous apprendre à utiliser l'audio et la vidéo HTML5

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!