Partage de projets visant à améliorer la compatibilité des navigateurs de la balise vidéo en HTML5

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 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 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 ; ê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 lors de la préparation d'un navigateur multiformat 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 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” />  
    你浏览器不支持 video 功能，点击这里下载视频： <a href=”video.webm”>下载视频</a>.   
</video>

La balise vidéo indique qu'il s'agit d'une vidéo, et les attributs width et height indiquent respectivement la largeur et la hauteur (pixels unitaires) 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 au fichier .htaccess :

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

Ça y est, c'est relativement simple, et pour des instructions plus précises sur l'utilisation de la vidéo, vous Vous pouvez le rechercher, ou consulter le lien de lecture étendu 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 :

<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

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

Recommandations associées :

À propos de l'analyse de contrôle de H5, nouveaux attributs audio et vidéo

HTML5 Méthode pour implémenter le plein écran (plein écran) du lecteur vidéo

HTML5 Contrôle de lecture de la balise vidéo

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!