Méthode vidéo HTML5 pour assurer la compatibilité du navigateur

Dans cet article, nous partagerons avec vous comment assurer la compatibilité du navigateur pour les vidéos HTML5. Dans le passé, Flash était le meilleur moyen de résoudre les vidéos sur les pages Web. Jusqu'à présent, il est toujours courant, comme ces vidéos. des sites Web tels que Youku et Xiami. Ces sites Web de musique en ligne utilisent toujours Flash pour fournir des services de lecture. Mais cette situation va changer avec le développement du HTML5. En ce qui concerne la vidéo, HTML5 ajoute la vidéo pour implémenter 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. Il est très puissant et contient moins de code pour accélérer le 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 et souhaitez utiliser la fonction vidéo HTML5 dans les pages Web, vous pouvez suivre les trois étapes suivantes.

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

En raison de problèmes de droits d'auteur avec les encodeurs, 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 ; être utilisé sur 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. Recommander un outil étranger Convertisseur en ligne, un outil de conversion vidéo en ligne gratuit. Vous n'avez même pas besoin d'installer de logiciel, sélectionnez simplement le format cible correspondant, puis téléchargez la vidéo, configurez 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. Je vais directement donner le code spécifique ci-dessous, puis l'expliquer brièvement :

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

Votre navigateur ne supporte pas la fonction vidéo, cliquez ici pour télécharger la vidéo :

video indique qu'il s'agit d'une vidéo, et les attributs width et height indiquent respectivement la largeur et la hauteur (unités de pixels) du contenu vidéo. . La balise vidéo peut contenir la balise source, qui est utilisée pour indiquer la vidéo référencée 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 la déclaration suivante dans le fichier .htaccess :

C'est à peu près tout. C'est relativement simple. Pour des méthodes plus spécifiques d'utilisation de la vidéo, vous pouvez la rechercher. Vous pouvez également voir le lien de lecture étendue de cet article. Je n'entrerai pas dans les détails 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, le contenu de l'invite dans la vidéo sera affiché. 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 :

<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 obtenons une utilisation compatible avec tous les navigateurs de la fonction vidéo.

Le contenu ci-dessus concerne la méthode permettant d'assurer la compatibilité du navigateur pour la vidéo HTML5. J'espère qu'il pourra aider tout le monde.

Recommandations associées :

Problèmes de compatibilité des navigateurs avec HTML5 et CSS3

Quels sont les navigateurs qui nécessitent une vérification de compatibilité en HTML

Implémenter le code js de lecture de musique compatible avec divers 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!