Jouer 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 ceci :

<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;
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 ne sont pas tous supportés. Mettons tout de suite d’accord tout le monde avec le format webm supporté par Firefox et Chrome que ce soit sur PC, tablette ou smartphone.

Donc un conseil, utilisez le format webm.

Pour convertir des vidéos dans ce format, je vous conseille FreeWebMVideoConverter téléchargeable gratuitement depuis FreeWebMVideoConverter.

 

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.webm" autoplay 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.webm" autoplay>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.webm" controls  width="300">Le navigateur ne supporte pas la vidéo</video>



Vous savez tout de la balise html5 video : il ne vous reste plus qu’à la mettre en œuvre.

 
[important]Des remarques ? Des commentaires ? Allez y, ici la parole est libre[/important]

 

Posté dans html5Taggé html5 games, html5 video, jeux html5  |  2 commentaires

2 réponses à "Jouer une vidéo dans une page html5"

Répondre