Lire une vidéo dans une page html5
Vous voulez jouer des vidéos dans vos pages web sans les faire héberger par youtube. Cet article est fait pour vous et vous montre comment intégrer une vidéo dans une page web html5.
Intégration de la vidéo dans la page html5
En html5, la balise video est dédiée à la visualisation d’une vidéo dans une page web et s’utilise comme suit.
<video controls src="maVideo.webm">Le navigateur ne supporte pas la vidéo</video>Les attributs
La balise video comporte les attributs :
– src qui indique le chemin vers le fichier vidéo à jouer;
– width qui indique la dimension horizontale de la vidéo;
– height qui indique la dimension verticale de la vidéo;
– à défaut, ce sont les dimensions de la vidéo qui font foi;
– controls qui permet s’il est présent, d’afficher la barre de contrôle de la vidéo (lecture,pause, stop, ….);
– autoplay qui permet de lancer automatique la vidéo lorsque elle est présente mais nécessite d’y ajouter le mot clé muted pour couper le son, qui est une contrainte de la norme;
– loop qui permet de lire la vidéo en boucle;
– poster qui affiche un image à la place de la vidéo lorsque qu’elle n’est pas lue, le chemin vers le fichier image à afficher étant la valeur de ce paramètre.
Les formats
Les formats vidéos sont variés et sont pur la plupart supportés.
Quelques exemples
– vidéo lancée automatiquement avec contrôles affichés (passez la souris sur la vidéo) et lecture en boucle
<video controls src="maVideo.mp4" autoplay muted loop>Le navigateur ne supporte pas la vidéo</video><video src="maVideo.mp4" autoplay muted>Le navigateur ne supporte pas la vidéo</video>– vidéo lancée automatiquement avec contrôles affichés et dimensionnement via la propriété width sans démarrage automatique (absence de la propriété autoplay) :
<video src="maVideo.mp4" controls width="300">Le navigateur ne supporte pas la vidéo</video>Maintenant que vous savez tout de la balise html5 video : il ne vous reste plus qu’à la mettre en œuvre.
