Télécharger le PDF du cours
video. Cet élément fonctionne de manière analogue à l’élément audio vu précédemment.
Les formats vidéo et leur support
Un fichier vidéo est relativement plus complexe qu’un simple fichier audio puisqu’une vidéo est va être composée à la fois d’une piste audio et d’une piste vidéo. Ces deux pistes vont être de formats différents et vont être regroupées dans un conteneur qui va se charger de les faire fonctionner ensemble.
En termes de support par les navigateurs, nous allons donc nous heurter aux mêmes problèmes qu’on a déjà vu avec l’intégration d’audio et notamment aux problèmes de brevet cette fois-ci non seulement sur les codecs des pistes audios mais également sur ceux des pistes vidéo et des conteneurs.
Comme pour l’élément audio, nous indiquerons donc généralement plusieurs formats de conteneurs dans notre élément video afin de s’assurer que la vidéo puisse être lue sur la plupart des navigateurs.
Les conteneurs les plus utilisés aujourd’hui sont les suivants :
WebM: contient de l’audio Ogg Vorbis avec de la vidéo VP8/VP9 ;MP4: contient de l’audio AAC ou MP3 avec de la vidéo H.264.
Notez par ailleurs que le MP4-HEVC utilisant le format vidéo H.265, annoncé pour la première fois en 2013, est censé succéder au MP4 utilisant de la vidéo H.264.
Le format AV1, annoncé en 2018 est lui censé succéder au WebM et concurrencer le HEVC. Ces deux formats n’ont cependant que peu de support par les navigateurs aujourd’hui : le HEVC n’est supporté que par Safari tandis que l’AV1 n’est supporté que par les dernières versions de Chrome et de Firefox.
Pour information, voici les supports de ces différents formats par les navigateurs les plus utilisés dans leur version la plus récente :
| Navigateur | MP4/H.264 | WebM |
|---|---|---|
| Chrome | Supporté | Supporté |
| Safari | Supporté | Non supporté |
| Firefox | Supporté | Supporté |
| Edge | Supporté | Supporté partiellement |
| Opera | Supporté | Supporté | Safari (iOS) | Supporté | Non supporté | Android | Supporté | Supporté | Chrome (Android) | Supporté | Supporté |
Insérer de la vidéo dans un fichier HTML
Pour pouvoir insérer de la vidéo dans nos pages, nous allons déjà devoir nous munir d’un fichier vidéo disponible sous différents formats.
Ici, je vais utiliser un fichier vidéo qui s’appelle « tortue » qui est originellement un fichier MP4 et que j’ai converti également en WebM.
Vous pouvez télécharger les deux formats de vidéo en cliquant ici. Je vous invite à placer ces fichiers dans le même dossier que vos fichiers de code.
La façon la plus simple d’insérer un fichier vidéo dans une page HTML va être d’utiliser un élément video avec deux attributs src et controls, exactement de la même façon que pour l’élément audio
L’attribut src va indiquer le chemin vers la ressource à intégrer tandis que l’attribut controls va permettre de faire apparaitre les contrôles fournis par le navigateur (notamment un bouton de lecture / arrêt, un bouton pour choisir le niveau sonore, etc.).
Nous allons également renseigner un texte dans l’élément video qui pourra être affiché dans certains anciennes versions de navigateurs dans le cas où le navigateur ne pourrait pas lire le fichier vidéo fourni.
En pratique, toutefois, cette façon de faire n’est pas optimale puisqu’elle ne nous permet pas de proposer plusieurs formats de fichiers différents pour les navigateurs.
Nous utiliserons donc généralement plutôt l’élément video de concert avec des éléments source qui vont nous permettre d’intégrer différents formats de fichier parmi lesquels le navigateur fera son choix.
Dans l’élément source, nous allons devoir inclure un attribut src qui va nous permettre d’indiquer l’emplacement du fichier vidéo.
Nous allons également pouvoir, de manière facultative, ajouter un attribut type qui va nous permettre d’indiquer rapidement au navigateur le type de codecs utilisé dans notre fichier pour que le navigateur sache immédiatement s’il peut le lire ou pas sans même avoir à le tester. Cela optimisera les performances de notre page.
Ici, le navigateur va s’arrêter dès qu’il va rencontrer un format qu’il sait lire et ignorer les autres formats fournis en dessous.
Les attributs de l’élément video
L’élément video possède un attribut strictement obligatoire qui est l’attribut controls. Cet attribut permet d’afficher les contrôles de base pour l’utilisateur comme la lecture, la pause, le choix du volume, etc. Les différentes options de contrôle vont être fournies par le navigateur.
En plus de cet attribut controls, on va pouvoir passer d’autres attributs facultatifs à l’élément video afin de contrôler comment le fichier doit être lu et notamment :
preload- L’attribut
preloadpermet d’indiquer au navigateur si le fichier doit être préchargé ou pas. On va pouvoir lui passer l’une des valeurs suivantes :none: le fichier vidéo ne sera pas préchargé ;metadata: seules les méta-données seront préchargées ;auto: le fichier sera préchargé.
autoplay- L’attribut
autoplayva nous permettre de lancer automatiquement la lecture du fichier vidéo dès qu’il sera chargé. Il suffit de le renseigner (même sans valeur explicite) pour que le fichier vidéo se lance automatiquement. Notez que certains navigateurs (dont Chrome) peuvent bloquer cet attribut car celui-ci est jugé mauvais pour vos visiteurs. loop- L’attribut
looppermet de lire le fichier vidéo en boucle. Il suffit donc de le renseigner (même sans valeur explicite) pour que le fichier soit lu en boucle. muted- L’attribut
mutedsert à définir si le son doit être initialement coupé. Il suffit de le renseigner (même sans valeur explicite) pour couper le son. poster- L’attribut
posterva nous permettre de renseigner l’adresse d’une image qui devra être utilisée comme image d’illustration de fond de la vidéo avant que celle-ci ne soit chargée et lancée.
En plus de ces attributs, notez que nous allons pouvoir gérer la taille de nos vidéos grâce aux attributs HTML width et height ou idéalement avec les propriétés CSS du même nom. Pour des raisons évidentes de ratio, nous ne préciserons toujours que l’une de ces deux propriétés (généralement width) afin que la deuxième dimension soit calculée automatiquement.
Ajouter des sous-titres à une vidéo
L’importance de l’ajout de sous-titres
Il est toujours très important lorsqu’on code en HTML de penser en termes d’accessibilité. L’idée ici est que votre code devrait toujours être accessible à tous, c’est-à-dire que vos pages devraient toujours pouvoir être comprises d’une façon ou d’une autre par chacun de vos visiteurs.
C’est là tout l’intérêt d’ajouter des descriptions sur nos images avec l’attribut alt par exemple. C’est la même logique qui se cache derrière l’ajout de sous-titres sur nos vidéos.
Pour ajouter des sous-titres à nos vidéos, nous allons déjà devoir les écrire dans un fichier séparé en respectant une certaine syntaxe. Le fichier sera enregistré sous le format WebVTT pour « Web Video Text Tracks ». Nous allons ensuite pouvoir intégrer ces sous titres dans notre vidéo en utilisant l’élément track.
L’écriture des sous-titres au format WebVTT
Nous allons écrire les sous-titres pour notre vidéo dans un fichier séparé au format WebVTT. Pour faire cela, nous pouvons utiliser notre éditeur ou un programme de bloc note et enregistrer le fichier avec l’extension .vtt.
Un fichier WebVTT doit respecter une certaine syntaxe pour pouvoir être lu convenablement :
- Tout fichier WebVTT doit commencer par le mot
WEBVTT, qui peut être éventuellement suivi sur la même ligne par un texte d’en-tête ; - La ligne sous la mention
WEBVTTdoit être vide ; - Ensuite, nous allons placer des indications de temps sous la forme
00:01.000 -->00:05.000suivies à chaque fois sur la ligne du dessous du sous-titre à afficher durant la période décrite.
Voici à quoi va pouvoir ressembler notre fichier :
L’intégration des sous-titres avec l’élément track et ses attributs
Une fois que nous avons écrit nos sous-titres et qu’on les a enregistrés au bon format, il va falloir les intégrer dans nos vidéos.
Pour cela, nous allons utiliser un élément track que nous allons placer à l’intérieur de notre élément video.
Cet élément track va devoir être obligatoirement accompagné d’un attribut src qui va nous permettre d’indiquer l’adresse du fichier contenant les sous titres ainsi que d’un attribut srclang qui va nous permettre de préciser la langue utilisée (fr pour français, en pour anglais, es pour espagnol, etc.).
Nous allons également pouvoir lui passer les attributs facultatifs suivants :
default- Indique qu’on souhaite utiliser ce fichier de sous-titres par défaut (utile dans le cas où on dispose de plusieurs fichiers de sous-titrage pour différentes langues) ;
kind- Cet attribut nous permet de préciseer la nature du texte ajouté à la vidéo. Sa valeur par défaut est
subtitles(« sous-titres ») mais si une mauvaise valeur est renseignée c’est la valeurmetadataqui sera utilisée. Les valeurs possibles sont :subtitles: Le texte passé correspond à des sous-titres. Les sous-titres sont pertinents pour des utilisateurs qui ne peuvent pas comprendre le contenu (cas des utilisateurs qui regardent des vidéos dans une autre langue que la leur) et ont également pour rôle de donner des informations contextuelles ;captions: Le texte est une traduction de l’audio de la vidéo. Le typecaptionsest pertinent pour des malentendants ou lorsque le son est désactivé par exemple ;descriptions: Le texte est une description du contenu vidéo. Ce type est adapté pour les personnes malvoyantes ;chapters: Ce type représente les titres des chapitres lorsque l’utilisateur navigue au sein du media ;metadata: Le texte sera utilisé par des scripts mais sera invisible pour l’utilisateur.
label- Permet d’indiquer la langue de chaque sous-titres comme « Français », « English » ou « Español. La liste de langues sera visible pour l’utilisateur et lui permettra de choisir le sous-titrage de son choix ;
Notez que dans le cas où nous avons plusieurs langues de sous-titrage à proposer, il faudra enregistrer chaque sous-titres dans un fichier .vtt différent et utiliser un nouvel élément track pour chacun d’entre eux.
Nous pouvons également proposer plusieurs fichiers de texte de type (kind) différents dans un même langage.
Il ne nous reste plus qu’à définir les styles de notre texte en ciblant l’élément track en CSS.
Notez ici que certains navigateurs ne vont pas afficher les sous-titres pour des fichiers en local (vs en production ou sur serveur). Cela va être le cas pour Chrome notamment. La capture d’écran ci-dessus a donc été faite avec Safari qui n’a pas cette limitation.
