Les API multimédia et graphiques en HTML5, exemples avec <audio/>, <video/> et <canvas/>

Insérer une vidéo

SyntaxeBalise <video>

HTML5 a prévu une balise spéciale pour insérer une vidéo : <video>.

L'utilisation de cette balise est similaire à la balise <audio>, et plusieurs formats sont aussi possibles.

La source de la vidéo doit être renseignée (attribut src ou élément source).

Comme pour la balise <audio>, les commandes de lecture apparaissent en ajoutant l'attribut 'controls' à la balise <video>.

ComplémentQuelques attributs utiles

On peut préciser le comportement du lecteur vidéo grâce à plusieurs attributs que l'on précisera dans la balise <video> :

  • poster : l'image qui apparaît tant que la vidéo n'est pas lancée. Si l'attribut n'est pas spécifié, il s'agira automatiquement de la première image de la vidéo.

  • autoplay : la lecture est automatiquement lancée alors que la vidéo est chargée.

  • loop : lecture reprenant indéfiniment à la fin de la vidéo.

  • height, width : spécifient les dimensions (en px) du lecteur.

  • muted : vidéo muette.

ExempleAjout d'une vidéo avec plusieurs formats

1
<video id="maVid" poster="img1.jpg" controls width="320" height="240">
2
    <source src="maVideo.mp4" type="video/mp4" />
3
    <source src="maVideo.webm" type="video/webm" />
4
    <source src="maVideo.ogv" type="video/ogg" />
5
    Alternative (balise non reconnue par le navigateur) : lien de téléchargement, message...
6
</video>
PrécédentPrécédentSuivantSuivant
AccueilAccueilImprimerImprimer Rihab Hachem, Cindy Pinvin, Baptiste Perraud, 2014-2016 (Contributions : Stéphane Crozat, les étudiants de l'UTC) Paternité - Partage des Conditions Initiales à l'IdentiqueRéalisé avec Scenari (nouvelle fenêtre)