Balise video
La balise video permet d'ajouter une vidéo sur une page HTML.
Elle permet également de contrôler cette vidéo.
Le chemin vers le fichier vidéo est spécifié via l'attribut
src ou la balise imbriquée source.
Si vous souhaitez voir le lecteur pour contrôler la lecture
vidéo - vous devez ajouter l'attribut controls.
Sans lui, vous ne verrez rien - il n'y aura pas non plus
de son ni d'image.
Parfois, héberger la vidéo sur le site lui-même n'est
pas très pratique (par exemple, votre hébergement a
une limitation sur la taille du site). Dans ce cas,
la vidéo peut être uploadée sur YouTube et intégrée
à l'aide de la balise iframe.
Attributs
| Attribut | Description |
|---|---|
src |
Spécifie le chemin vers le fichier vidéo.
Mais il est préférable d'utiliser pour cela la balise source
(dans ce cas, il sera possible de spécifier la vidéo dans différents formats).
|
preload |
Utilisé pour charger le fichier vidéo en même temps que le chargement de la page du site.
Valeurs acceptées : none (ne pas charger le fichier, par défaut),
metadata (charger uniquement les informations de service : durée, etc.),
auto (charger la vidéo entièrement lors du chargement de la page HTML).
|
autoplay |
Le son commence à jouer immédiatement après le chargement de la page,
la présence de l'attribut preload sera ignorée.
Attribut sans valeur. |
controls |
Ajoute un panneau de contrôle à la vidéo.
Attribut sans valeur. Par défaut (si l'attribut est absent), le panneau n'est pas ajouté. |
loop |
Répète l'enregistrement vidéo en "boucle" :
après sa fin, il recommencera à jouer.
Attribut sans valeur. Par défaut (si l'attribut est absent), l'enregistrement ne jouera qu' 1 fois.
|
poster |
Chemin vers l'image qui sera affichée tant que la vidéo n'est pas disponible ou n'est pas lue.
Si l'attribut poster n'est pas spécifié, le navigateur essaiera d'afficher la première image de la vidéo.
|
height |
L'attribut height définit la hauteur de la zone de lecture de la vidéo (en pixels
ou pourcentages).
La vidéo elle-même ajuste ses dimensions à la hausse ou à la baisse pour s'adapter à la hauteur donnée,
mais ses proportions ne changent pas.
Valeur par défaut : la hauteur est prise à partir des paramètres de la vidéo, si cette valeur n'est pas disponible, alors la valeur de l'attribut height
est considérée comme égale à la hauteur de l'image de l'attribut poster.
Si poster n'est pas non plus défini - la hauteur
est fixée à 150 pixels.
|
width |
L'attribut width définit la largeur de la zone de lecture de la vidéo (en pixels
ou pourcentages).
La vidéo elle-même ajuste ses dimensions à la hausse ou à la baisse pour s'adapter à la largeur donnée,
mais ses proportions ne changent pas.
Valeur par défaut : la largeur est prise à partir des paramètres de la vidéo, si cette valeur n'est pas disponible, alors la valeur de l'attribut width
est considérée comme égale à la largeur de l'image de l'attribut poster.
Si poster n'est pas non plus défini - la largeur
est fixée à 150 pixels.
|
Exemple . Lecteur sur la page du site
Ajoutons un lecteur vidéo à la page.
Pour les navigateurs qui ne prennent pas en charge
la balise video, un message spécial
est laissé à ce sujet :
<video src="moovie.mp4" controls>
Votre navigateur ne prend pas en charge video en HTML5.
</video>
Exemple .
Ajoutons la balise source
à la balise video :
<video>
<source src="moovie.mp4" controls>
Votre navigateur ne prend pas en charge video en HTML5.
</video>
