Embarquer une vidéo dans une page HTML se fait maintenant très facilement car des éléments ont été spécifiquement définis dans HTML5.
Les navigateurs de dernière génération prennent tous en compte la lecture native de certains formats vidéos : ils n'ont plus besoin de plug-in pour traiter les codecs vidéos, parce que les algorithmes de décompression font partie intégrante de leur code.

Vidéo et audio, codecs et conteneurs lire aussi tu dois.

Comme pour les images, il existe des formats spécifiques à utiliser car tous les navigateurs ne gérent pas tous les codecs vidéos, en particulier parce que certains nécessitent le paiement de droits pour que leur algorithme puisse être utilisé (codecs propriétaires vs codecs libres ou open source).
A noter aussi que les performances réseaux et les performances de compression des codecs permettent aujourd'hui la diffusion d'un tel média.

Les vidéos dans les exemples de cette page sont de très petite dimension et de très courte durée à cause de la taille en octets des fichiers vidéo qui est toujours importante.

### L'élément <video>

On utilise la balise video pour embarquer une séquence vidéo dans du contenu. La balise doit avoir une balise de fermeture `</video>` bien que le contenu vidéo ne soit pas dans le fichier HTML.

Les conteneurs (ie ~ les formats) utilisables sont les suivants :

Navigateurs | Conteneur | Extension
Chrome | MP4, Ogg, WebM | .mp4, .ogg, .webm
Firefox | MP4, Ogg, WebM | .mp4, .ogg, .webm
Internet Explorer | MP4 | .mp4
Edge (* avec ext. WebMedia) | MP4, Ogg*, WebM* | .mp4, .ogg*, .webm*
Opera | MP4, Ogg, WebM | .mp4, .ogg, .webm

Comme pour tous les éléments embarqués, il faut spécifier la localisation de la ressource sur le réseau (ie son URL). Avec la vidéo, il y a 2 façons de spécifier le fichier source :

- avec un attribut `src`
- avec un ou plusieurs éléments source

Exemple : vidéo avec attribut src
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>vidéo avec attribut src</title> </head> <body> <video src="videos/sw01.mp4" controls width="480" height="270" poster="images/vador_sucks.jpg"> Affiché si le format vidéo n'est pas géré. </video> <p>Extrait d'une vidéo disponible en entier à http://www.youtube.com/watch?v=3KWTqYJsr-s</p> </body> </html>
Exemple : vidéo avec éléments source
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Vidéo avec éléments source</title> </head> <body> <video controls width="480" height="270" poster="images/vador_sucks.jpg"> <source src="videos/sw01.webm" type="video/webm"> <source src="videos/sw01.mp4" type="video/mp4"> <source src="videos/sw01.ogg" type="video/ogg"> Affiché si le format vidéo n'est pas géré. </video> <p>Extrait d'une vidéo disponible en entier à http://www.youtube.com/watch?v=3KWTqYJsr-s</p> </body> </html>

#### L'attribut src

L'attribut `src` est une des solutions possibles pour définir l'URL du fichier vidéo à télécharger et à inclure dans la page. Bien sûr si la vidéo est un fichier situé dans un des dossiers de votre site, il faut utiliser une URL relative pour faire le lien.

Je vous rappelle qu'il convient d'être prudent avec les caractères utilisés pour les noms des fichiers et des dossiers qui les contiennent et je vous conseille (à nouveau) d'adopter les règles suivantes :

- les noms de fichier et de dossiers étant sensibles à la casse, utilisez uniquement des minuscules,
- utilisez uniquement les caractères aplhabétiques non accentués (de a à z), des chiffres (de 0 à 9), le caractère -, le caractère _ et le caractère .
- n'utilisez jamais d'espaces.

Quand vous allez tester le code HTML suivant, vous obtiendrez une page dans laquelle s'affiche la 1ère image de la vidéo, mais rien de plus ne se passe et aucun moyen n'est fourni pour déclencher la lecture.

Exemple : vidéo
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Vidéo</title> </head> <body> <video src="videos/sw01.mp4"> <!-- Ce qui est ici est affiché si le format vidéo n'est pas géré par le navigateur. On peut mettre par exemple un message avec un lien direct pour que l'utilisateur puisse télécharger la vidéo --> <p>Malheureusement votre navigateur ne peut pas lire cette vidéo. Mais heureusement vous pouvez <a href="videos/sw01.mp4">télécharger une version MP4</a></p> </video> <p>Extrait d'une vidéo disponible en entier à http://www.youtube.com/watch?v=3KWTqYJsr-s</p> </body> </html>

L'attribut `src` tout seul n'est pas suffisant pour que la vidéo soit lue . On doit ajouter d'autres attributs pour la lecture à la demande de l'utilisateur (attribut `controls`) ou automatique (attribut `autoplay`).

#### L'attribut controls

Pour que la vidéo soit fonctionnelle il faut ajouter l'attribut `controls` qui va forcer l'affichage d'une barre d'icônes permettant de contrôler différentes actions : play, pause, début, etc.

`controls` est un attribut booléen : c'est la présence de l'attribut qui définit sa prise en compte. Si une valeur est affectée elle n'aura aucune influence. Une erreur commune est d'écrire `controls="false"` : la barre de contrôle sera affichée malgré la valeur `false`.

Avec HTML seul on ne peut pas agir sur cette barre de contrôle. Il n'est pas possible de modifier sa position, sa couleur, la forme ou la présence de tel ou tel bouton. Chaque navigateur l'affiche comme il veut, à l'endroit où il veut, et celà peut changer d'une version à une autre, ou même selon les dimensions de la vidéo.

Exemple : vidéo avec contrôles
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Vidéo avec contrôles</title> </head> <body> <video src="videos/sw01.mp4" controls> Affiché si le format vidéo n'est pas géré. </video> <p>Extrait d'une vidéo disponible en entier à http://www.youtube.com/watch?v=3KWTqYJsr-s</p> </body> </html>

#### Dimensions

Les attributs `width` et `height` permettent de donner la largeur et la hauteur de la vidéo. La valeur de ces attributs est simplement un nombre entier qui exprime la hauteur ou la largeur en pixels. Il ne faut surtout pas spécifier d'unité (le pixel) car la valeur ne serait pas prise en compte.

Comme pour les images, et pour les même raisons, je vous conseille de toujours donner les dimensions des vidéos.

Exemple : dimensions de la vidéo
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Dimensions de la vidéo</title> </head> <body> <video src="videos/sw01.mp4" controls width="480" height="270"> Affiché si le format vidéo n'est pas géré. </video> <p>Extrait d'une vidéo disponible en entier à http://www.youtube.com/watch?v=3KWTqYJsr-s</p> </body> </html>

#### L'attribut poster

L'attribut `poster` accepte comme valeur l'URL d'une image à afficher tant que la vidéo n'est pas en mode lecture.
L'utilisation de `poster` est intéressante à partir du moment où la lecture de la vidéo n'est pas certaine (l'utilisateur n'est pas interessé) ou que la page contient de nombreux autres médias à télécharger (images, autres vidéos, audio). Dans ce cas le navigateur affichera l'image d'attente et passera au téléchargement de la vidéo uniquement quand ça sera nécessaire. Si il n'y a pas de `poster`, le navigateur téléchargera le plus souvent le début de la vidéo pour avoir quelque chose à afficher plutôt qu'un espace noir.

Exemple : poster
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Poster</title> </head> <body> <video src="videos/sw01.mp4" controls width="480" height="270" poster="images/vador_sucks.jpg"> Affiché si le format vidéo n'est pas géré. </video> <p>Extrait d'une vidéo disponible en entier à http://www.youtube.com/watch?v=3KWTqYJsr-s</p> </body> </html>

#### L'attribut autoplay

L'attribut `autoplay` est un attribut booléen qui déclenche la lecture automatique de la vidéo dès qu'elle est possible.

Exemple : lecture automatique
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Lecture automatique</title> </head> <body> <video src="videos/sw01.mp4" controls width="480" height="270" poster="images/vador_sucks.jpg" autoplay> Affiché si le format vidéo n'est pas géré. </video> <p>Extrait d'une vidéo disponible en entier à http://www.youtube.com/watch?v=3KWTqYJsr-s</p> </body> </html>

Si vous ne voulez pas que l'utilisateur ait le contrôle de la vidéo, mais que la vidéo soit lue malgré tout, vous pouvez ne pas mettre d'attribut `controls` et uniquement un attribut `autoplay`.

#### L'attribut loop

L'attribut `loop` est un attribut booléen qui déclenche la lecture en boucle de la vidéo.

Exemple : vidéo en boucle
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Vidéo en boucle</title> </head> <body> <video src="videos/sw02.mp4" width="480" height="270" autoplay loop> Affiché si le format vidéo n'est pas géré. </video> <p>Extrait d'une vidéo disponible en entier à http://www.youtube.com/watch?v=3KWTqYJsr-s</p> </body> </html>

#### L'attribut preload

L'attribut `preload` définit comment sera chargée la vidéo si on ne veut pas utiliser le système mis en place par le navigateur pour la gestion des chargements.
L'attribut `preload` peut avoir 3 valeurs.

- `preload="none"` : le téléchargement de la vidéo commencera seulement quand l'utilisateur démarrera la lecture.
- `preload="auto"` : le téléchargement de la vidéo commencera dès que la page sera affichée. Celà peut conduire à surcharger le réseau et le serveur si la vidéo est de grande taille et pas regardée.
- `preload="metadata"` : le navigateur va seulement télécharger les métadonnées de la vidéo comme sa durée, sa taille, ses dimensions, liste des pistes, etc.

### Sources multiples

L'élément source permet de définir plusieurs sources pour une vidéo, et ainsi de pallier l'absence de support de certains formats par le navigateur.

Le travail de préparation est plus long car si on veut être complet, il faut encoder la même vidéo pour 3 conteneurs différents et fournir un fichier MP4, un fichier WebM et un fichier Ogg (cf les conteneurs vidéo).

Entre les balises <video> et </video> on placera autant d'éléments source que l'on veut fournir de formats différents.
La localisation de la ressource sur le réseaut est faite avec l'URL donnée comme valeur de l'attribut `src`
Le navigateur téléchargera la 1ère source de la liste qu'il sait décoder et afficher.
Pour faire ce choix, il se base sur le type MIME défini par l'attribut `type`.

Exemple : sources vidéo multiples
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Sources vidéo multiples</title> </head> <body> <video controls width="480" height="270" poster="images/vador_sucks.jpg"> <source src="videos/sw01.webm" type="video/webm"> <source src="videos/sw01.mp4" type="video/mp4"> <source src="videos/sw01.ogg" type="video/ogg"> Affiché si le format vidéo n'est pas géré. </video> <p>Extrait d'une vidéo disponible en entier à http://www.youtube.com/watch?v=3KWTqYJsr-s</p> </body> </html>

Une particularité est de pouvoir préciser dans l'attribut `type` le codec utilisé par le conteneur. La syntaxe est un peu embarassante car il y a un mélange à faire entre des guillemets simples et des guillemets doubles.

Exemple : sources vidéo multiples
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Sources vidéo multiples</title> </head> <body> <video controls width="480" height="270" poster="images/vador_sucks.jpg"> <source src="videos/sw01.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="videos/sw01.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="videos/sw01.ogg" type='video/ogg; codecs="theora, vorbis"'> Affiché si le format vidéo n'est pas géré. </video> <p>Extrait d'une vidéo disponible en entier à http://www.youtube.com/watch?v=3KWTqYJsr-s</p> </body> </html>

Vidéo et audio, codecs et conteneurs lire aussi tu dois.

### Store wars

Complétez le code HTML pour obtenir le résultat ci-dessous. images et textes | Le poster et les vidéos se trouvent dans l'arborescence suivante : arborescence de l'exercice
Le poster est dans le dossier `exemples` et s'appelle `parasites.gif`. Il y a 2 sources pour la vidéo : `store_wars.ogg` dans le dossier `star_wars` et `store_wars.mp4` dans le dossier `images` du dossier `star_wars`. Les dimensions des vidéos sont de 450 pixels sur 360. Elles doivent avoir des contrôles, ne sont ni en autoplay ni en boucle. Si le navigateur ne supporte pas le tag vidéo, le message "Votre navigateur est trop ancien pour supporter les vidéos." s'affiche. L'URL du lien sur tagtélé est `http://www.tagtele.com/videos/voir/86772/`. Le lien doit s'ouvrir dans une nouvelle fenêtre.

Code à compléter

Exercice : Store wars
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Store wars</title> </head> <body> </body> </html>

Une solution possible

Exercice : Store wars
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Store wars</title> </head> <body> <video controls width="450" height="360" poster="../exemples/parasites.gif"> <source src="../exemples/star_wars/store_wars.ogg" type="video/ogg"> <source src="../exemples/star_wars/images/store_wars.mp4" type="video/mp4"> Votre navigateur est trop ancien pour supporter les vidéos. </video> <h3> Suite et fin sur <a href="http://www.tagtele.com/videos/voir/86772/" target="_blank">tagtélé</a>. </h3> </body> </html>