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>
– vidéo lancée automatiquement sans contrôles affichés (passez la souris sur la vidéo) :
<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.

Ne rate pas cette chance

 

Reçois ton livre GRATUIT pour créer des jeux vidéo.

Bravo, jette un œil à ta boite mail pour télécharger ton guide.