Comment mettre une vidéo sur une page HTML ?

Que vous soyez un simple amateur ou un passionné d’informatique, les langages de balisage comme le HTML et le CSS sont des bases obligatoires à maîtriser. En appliquant la bonne méthode, vous pourrez structurer une page web statique ou dynamique avec des textes, des fichiers audio, mais également des fichiers vidéo. Pour l’insertion de vidéo sur HTML, vous pouvez appliquer de nombreuses méthodes en insérant des balises spécifiques.

Utilisez HTML5 pour intégrer des vidéos plus facilement

La version 5 du HTML supporte des formats de vidéos de qualité, avec des images plus nettes de meilleurs sons, et une vitesse de lecture plus fluide. Des experts SEO à Lille vous confirmeront que le HTML5 est la base de toutes les pages web sur Internet. Tout d'abord, procurez-vous donc une vidéo sous format WebM (,un format de fichier multimédia ouvert, principalement destiné à un usage sur le web) Ogg ( un fichier audio au format Ogg contenant des données audio compressées en Vorbis) ou MP4 (un format conteneur pour encapsuler des données de type multimédia). Ces formats sont supportés par la majorité des navigateurs web disponibles sur le marché. Ensuite, utilisez la balise d’ouverture <video> et la balise de fermeture </video>. Vous pouvez également proposer de multiples formats, en spécifiant directement le type de vidéo avec la balise <source>. L’utilisation de quelques attributs est nécessaire pour que la vidéo s’affiche et puisse être démarrée :

• src : pour spécifier l’URL où la vidéo est hébergée
• type: pour préciser le format de la vidéo
• controls: pour contrôler la lecture de la vidéo

Des attributs optionnels pour un meilleur contrôle de la vidéo

Les attributs optionnels permettent d’améliorer l’aspect, les dimensions et la fluidité et de votre vidéo. Si vous indiquez les deux attributs width et height, vous pourrez choisir à votre guise le rapport entre la hauteur et la largeur. L’attribut poster sert à personnaliser la vignette que vous apercevez lors de l’affichage de la vidéo au démarrage. S’il n’est pas indiqué, ce sera le premier plan de la vidéo qui s’affichera. Grâce à l’attribut autoplay, vous pouvez démarrer automatiquement la vidéo lorsque la page est chargée. La vidéo peut être lancée en boucle, en utilisant l’attribut loop. Vous pouvez utiliser l’attribut preload pour charger la vidéo dès que votre page HTML soit ouverte.

Ajoutez des sous-titres à votre vidéo

Quand vous codez en HTML, vous devez prendre en compte l’ajout de sous-titre dans vos vidéos. Cette action procurera plus d’accessibilité à votre vidéo, surtout si vous souhaitez viser un public plus large quand vous construirez un véritable site web hébergé plus tard. Pour ce faire, vous aurez à écrire des codes spécifiques dans un fichier séparé enregistré sous format « WebVTT ». Ensuite, il faut l’associer avec un élément track, que vous placerez à l’intérieur de votre élément vidéo.