Les vidéos sont indispensables pour capter l’attention en ligne mais leur intégration peut être technique.
Une mauvaise intégration peut entraîner des problèmes de compatibilité et nuire à l’expérience utilisateur.
Cet article vous guidera à travers l’intégration et la personnalisation des vidéos HTML avec CSS.
Lancez votre carrière de développeur web avec une formation pratique.
Introduction à l'intégration de vidéos HTML
Les vidéos sont le type de contenu le plus captivant sur internet. Elles permettent également de transmettre des messages complexes, de raconter des histoires intéressantes ou d’apporter simplement un élément accrocheur à vos œuvres numériques. Qu’il s’agisse d’une vidéo expliquant comment faire quelque chose, d’un aperçu commercial, d’une publicité ou de matériel éducatif, les matériaux vidéo augmentent l’efficacité de la page et renforcent l’attention des utilisateurs.
Dans cette partie, nous allons apprendre à inclure des vidéos en utilisant la balise HTML <video>, comment contrôler la lecture et le style des vidéos avec CSS.
Intégrer des vidéos avec la balise
L’intégration d’une vidéo se fait avec la balise <video>, qui supporte plusieurs formats comme MP4, WebM et Ogg.
Assurez-vous d’intégrer le fichier vidéo dans votre dossier :
<video controls>
<source src="video/001.mp4" />
</video>
controls : Ajoute des options de contrôle (lecture, pause, volume, etc.) pour l’utilisateur.
Personnalisation CSS des vidéos HTML
Vous pouvez enrichir votre balise <video> avec des attributs :
- autoplay :La vidéo démarre automatiquement dès que la page est chargée.
- loop :La vidéo se rejoue automatiquement une fois qu’elle est terminée.
- muted :La vidéo est sans son au départ (souvent utilisé avec autoplay pour ne pas déranger les utilisateurs).
- poster :Définit une image qui apparaît avant le début de la lecture de la vidéo.
Exemple :
<video controls loop poster="image/002.jpg">
<source src="video/001.mp4" />
</video>
Bien que les contrôles par défaut diffèrent d’un navigateur à l’autre, il est possible de personnaliser l’apparence et le positionnement de l’élément <video> en utilisant du CSS.
Exemple :
video {
display: block;
margin: 20px auto;
width: 80%;
max-width: 800px;
border: 2px solid black;
border-radius: 10px;
}
Résultat :
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment intégrer une vidéo en HTML ?
Quels sont les formats vidéo pris en charge par HTML ?
Comment personnaliser l'apparence d'une vidéo avec CSS ?
Quels attributs peuvent être ajoutés à la balise
Comment ajouter des contrôles à une vidéo en HTML ?
Conclusion
En intégrant des vidéos de manière optimisée avec HTML et CSS, vous pouvez transformer l’expérience utilisateur sur votre site. Quelles autres méthodes utilisez-vous pour enrichir votre contenu numérique ?
