Maintenant que nous avons vu comment insérer un élément audio, il est temps de voir comment insérer un élément vidéo. Et croyez-moi, une fois que l'on a vu comment marche l'audio il est très simple d'installer un lecteur vidéo sur son site.
Si la balise <audio> permet d'insérer du contenu audio, il est logique que la balise qui permette d'en faire de même avec le contenu vidéo soit <video>. Et c'est précisément le cas, ce qui nous simplifiera grandement la vie.
Comme pour l'audio, il faut ajouter un attribut de source à cette balise <video> pour pouvoir charger le contenu vidéo.
Voici un exemple de code :
<video src="video.wmv"></video>
Là encore, pareil que pour l'audio, il faut ajouter d'autres attributs pour que quelque chose se produise.
Voici quelques attributs que l'on peut ajouter à cette balise :
poster : une image à afficher qui représente la vidéo et qui sera affiché tant que cette vidéo n'est pas lancée par l'utilisateur
controls : de même que pour l'audio, cet attribut va afficher les options de visionnage comme lecture, pause et arrêt
loop : définir si la vidéo est jouée en boucle
preload : définir si la vidéo est préchargée
autoplay : définir si la vidéo est lancée dès le chargement de la page
width : la largeur de la vidéo
height : la hauteur de la vidéo
Vous pouvez donc modifier à souhait votre lecteur vidéo grâce à ces attributs.
Pourquoi ouvre-t-on la balise pour la refermer tout de suite après ?
De même que pour le lecteur audio, vous pouvez y insérer un message d'erreur qui sera affiché si pour une raison ou une autre, souvent une histoire de version du navigateur, l'élément vidéo ne peut pas être chargé.
Il est également intéressant que vous pouvez offrir à vos visiteurs un choix de plusieurs formats vidéos différents, bien que la sélection soit automatique en fonction du navigateur du client.
Pour cela on retire l'attribut "src" de la balise de vidéo et on ajoute des balises <source> à l'intérieur de cette balise de vidéo.