Tag video en HTML5

HTML5 introduit un nouveau composant : video. Celui ci permet de mettre en place un lecteur video très simplement au sein d'un document HTML.
Ce lecteur permet de lire des formats video variés type ogg, h264, etc ( supporté par le navigateur selon l'implémentation du tag video).

Attributs

Le tag video possède différents attributs:

  • autoplay: si sa valeur est true, la video se lancera dès qu'elle sera prête (c'est a dire dès qu'elle est chargée)
  • controls: si sa valeur est controls, alors une barre de controle sera présente ( avec bouton play, barre de progression, volume, etc.)
  • height: spécifie la hauteur du composant video dans le document
  • width: spécifie la largeur du composant video dans le document
  • loop: si sa valeur est loop, la video redémarrera à chaque fois qu'elle se finira
  • preload: si sa valeur est true, la video se chargera au chargement de la page ( si autoplay = true, le preload est ignoré)
  • src: sa valeur correspond à l'url de la video à jouer
  • poster: sa valeur correspond à l'url de l'image à afficher avant que le media se joue

Exemples

video basique

 
<video src="http://www.w3schools.com/html5/movie.ogg" width="300" height="220" autoplay="true"></video>

video avec controles

 
<video src="http://www.w3schools.com/html5/movie.ogg" controls="controls" width="300" height="220" autoplay="true"></video>

video avec loop

 
<video src="http://www.w3schools.com/html5/movie.ogg" loop="loop" width="300" height="220" autoplay="true"></video>

video avec loop et controles

 
<video src="http://www.w3schools.com/html5/movie.ogg" loop="loop" controls="controls" width="300" height="220" autoplay="true"></video>
retourner en haut de la page