Accueil    HTML    Balise Video
 



balise video  Balise VIDEO : flux vidéo

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture obligatoire | Support :
  • Google Chrome 20.0 et plus
  • Firefox 14.0.1 et plus
  • IE 9 et plus
  • Opera 12 et plus
  • Safari 5.1.7 et plus



La balise <video> permet de lire des fichiers ou des flux vidéo directement dans la page en proposant un lecteur intégré avec des contrôles génériques tels que lecture, pause, positionnement dans la vidéo et contrôle du volume. Lorsque le fichier vidéo n'est pas trouvé ou que son format n'est pas supporté, le lecteur n'est pour certains navigateurs pas visible.

La balise <source> permet de définir au sein de l'élément <video> plusieurs ressources alternatives au cas où le navigateur ne supporterai pas le format initialement spécifié dans l'attribut "src" (il faut alors supprimer l'attribut "src" et spécifier les différents fichiers par ordre de priorité dans les balises <source>).

Avec la balise video, une API est également disponible et permet de gérer en javascript beaucoup de paramètres pour gérer le flux. Voici une introduction à quelques fonctions de l'API vidéo :


Propriétés Définition
load() Permet de charger dynamiquement le fichier source de la vidéo
play() Lance la lecture de la vidéo
pause() Pause la lecture de la vidéo
currentTime Retourne ou modifie l'avancement actuel de la lecture de la vidéo en secondes
playbackRate Permet de modifier la vitesse de lecture de la vidéo
volume Permet de modifier dynamiquement le contrôle du volume
muted Permet de désactiver ou réactiver le son de la vidéo


Pour mettre à disposition les différents formats vidéo afin de toucher tous les utilisateurs, il faut employer un logiciel de conversion comme par exemple :
sothinkmedia video-converter
(gratuit, gère les formats webm - mp4 - ogg ...)

Le support des formats vidéo les plus courant par les navigateurs est le suivant :


firefox
V 14 et +
chrome
V 20 et +
internet explorer
V. 9
safari
V 5.1 et +
opera
12 et +
h264 non supporté ok ok ok non supporté
ogg ok ok non supporté non supporté non supporté
webm ok ok non supporté non supporté ok



Propriétés pour la balise video :




Propriétés Définition Valeurs
autoplay Indique que le fichier vidéo doit être lu automatiquement lorsqu'il est chargé autoplay
controls Affiche les différentes fonctionnalités du lecteur (lecture, pause, volume ...) controls
loop Indique au lecteur de lire la vidéo en boucle loop
muted Indique au lecteur de désactiver le son de la vidéo muted
poster Spécifie une image par défaut à afficher comme arriére plan du lecteur tant que la vidéo n'est pas lancée URL
preload Spécifie le mode de chargement du fichier vidéo à l'ouverture de la page auto
metadata
none
src URL du fichier vidéo qui sera lu URL


Exemple d'utilisation de la balise video :




Définition de plusieurs formats de fichiers video au sein de la balise <video> :

<video controls="controls" poster="exemples/exemplechatbg.jpg">
   <source src="exemples/exemplechat.webm" type="video/webm" />
   <source src="exemples/exemplechat.mp4" type="video/mp4" />
   <source src="exemples/exemplechat.ogv" type="video/ogg" />
   Votre navigateur ne supporte pas le tag <video>.
</video>


Définition de plusieurs formats de fichiers video au sein de la balise <video> :