Les vidéos en HTML5 - les bases

Bonjour à tous !

Si vous êtes là, c'est que vous prévoyez d'insérer une ou plusieurs vidéos sur votre site. Eh bien sachez que ce n'est pas compliqué ! Nous allons ici voir comment préparer sa vidéo pour le web, ainsi que décortiquer la balise html5 <video>. A la fin de cet article, vous saurez mettre en ligne une vidéo sur votre site dans différents contextes, sans passer par une plateforme vidéo comme Youtube ou Vimeo.

Pourquoi insérer une vidéo en HTML5 ?

Bien que passer par une plateforme vidéo puisse avoir des avantages comme ne pas surcharger votre espace disque par le poids des vidéos (et vous savez comme ça peut vite être lourd) ou ne pas vous prendre la tête avec l'intégration (on vient juste copier/coller le code fourni par la plateforme), dans certains cas il est bien plus pertinent de faire ça en HTML5. Vous avez ainsi un contrôle total des paramètres, de l'aspect, ou encore des interactions avec vos vidéos.

Un exemple ? On voit de temps en temps des sites dont le fond est en fait une vidéo. C'est beau, ça claque, mais pour ça on oublie Youtube et compagnie !

Préparer sa vidéo pour le web

Quel que soit le logiciel que vous utilisez pour monter et/ou convertir vos vidéos, gardez ces conseils en tête lorsque vous les préparez pour utiliser sur votre site :

• Pensez web, donc pensez léger ! Comme pour une image, il faudra bien doser le rapport qualité/poids. La bande passante de votre serveur et le forfait mobile de votre internaute vous remercieront !
• Il est possible avec la balise <video> d'utiliser plusieurs formats de fichiers que le navigateur utilisera selon ses possibilités. Si vous cherchez des infos complémentaires sur le net, vous entendrez parler de .mp4, de .ogg, de .webm... Personnellement, je ne m'encombre jamais de plusieurs formats de fichier et me contente de .mp4 (h264) car celui-ci est compatible avec tous les navigateurs à jour (cf. liste de compatibilité). Ça vous évitera de faire plusieurs exports et libèrera de la place sur votre serveur.
• N'avoir qu'une seule piste audio (ou aucune). Pour la gestion multilingue, il vaut mieux gérer plusieurs vidéos et sélectionner la source en fonction de la langue (on verra plus bas comment faire).

La balise <video> et ses attributs

Bien, maintenant que vous savez pourquoi vous allez utiliser du HTML5 (donc la balise <video> puisque c'est d'elle qu'il s'agit) et que vous savez comment optimiser votre vidéo pour un affichage sur le web, décortiquons ladite balise.

La voici fonctionnelle dans son plus simple appareil :

<video src="video.mp4"></video>

Et voici le rendu réel (j'ai seulement ajouté les attributs width et height pour définir ses dimensions) :

Comme vous pouvez le voir, elle est bien là, mais en l'état elle ne vaut guère mieux qu'une image, à part si vos internautes utilisent le menu contextuel au clic droit sur la vidéo, ou que vous ne lanciez sa lecture en javascript. Nous allons donc poursuivre notre étude par des attributs utiles.

Controls

L'attribut controls permet d'afficher les options de lecture de la vidéo. Votre internaute pourra alors lancer ou arrêter la lecture, contrôler le son, etc. En gros, si vous voulez proposer une vidéo "consultable" (j'entends par là une vidéo avec du contenu intéressant, et non une simple vidéo d'animation de fond qui sert juste à faire joli) et que vous n'avez pas envie de vous prendre la tête à créer un player customisé, cet attribut vous sera quasiment indispensable, et suffisant !

Le voici donc en action :

<video src="video.mp4" controls></video>

Cool, c'est super simple en fait ! Je peux donc arrêter le tuto ici ?

Oui, à ce stade vous savez insérer une vidéo un peu comme sur les plateformes type Youtube ou Vimeo ! La suite vous intéressera si vous voulez vous amuser davantage avec les vidéos, affiner leurs paramètres, etc.

Autoplay

Autre moyen de lancer la vidéo : la lancer automatiquement sans intervention de l'internaute. Cela se fait avec l'attribut autoplay. Je conseille de l'utiliser plutôt dans des cas particuliers, comme une vidéo de fond, ou si l'internaute arrive sur votre page en sachant qu'il va tomber directement sur cette vidéo. Si vous la mettez plus bas sur votre page, il est possible qu'elle n'attende pas votre internaute pour commencer à se lancer, ce qui est en soit frustrant quand on arrive sur une vidéo en fin de lecture. Pire encore quand votre vidéo a de l'audio !

D'ailleurs, sur Chrome ou Safari, la lecture automatique est bloquée tant que vous n'avez pas désactivé le son de votre vidéo avec l'attribut muted. Et c'est une bonne chose !

Autre conseil également, utilisez-là avec l'attribut loop, comme expliqué au paragraphe suivant.

Loop

Cet attribut permet tout simplement de lire la vidéo en boucle : dès qu'elle est terminée, elle revient au début. C'est donc intéressant si vous faites une vidéo "décorative" dont la chronologie n'a pas d'importance, et que vous la cumulez avec autoplay.

Muted

Comme expliqué un peu plus haut et comme vous vous en doutiez, l'attribut muted permet de mettre la vidéo en sourdine. Voici le résultat avec autoplay, loop et muted :

<video src="video.mp4" autoplay loop muted></video>

Poster

L'attribut poster permet de choisir une image qui sera affichée à la place de la vidéo tant que celle-ci ne sera pas lancée. En son absence, ça sera par défaut la première image de la vidéo qui sera utilisée. Voici un exemple :

<video src="video.mp4" controls poster="video.jpg"></video>

Et c'est tout pour les principaux attributs que vous allez utiliser dans votre balise <video>. Il en existe bien d'autres, mais pour une utilisation plus poussée. Cependant, comme le nom de l'article le laisse supposer, je m'arrête aux bases. Elles vous permettront quand même à elles seules de réaliser la plupart des cas d'intégration d'une vidéo sur une page !

Et mis à part ces attributs, la balise reste vide ?

Ça peut, et ça fonctionne très bien comme ça. Mais il existe également deux autres balises qui peuvent être insérée dans une balise <video>. Il y a <source>, et il y a <track>.

Tout autre contenu ne sera affiché que si la balise <video> n'est pas reconnue par le navigateur. Ça peut éventuellement servir à afficher un message proposant à l'internaute qu'il serait peut-être temps de le mettre à jour, ou l'image utilisée en tant que poster en tant que remplacement de la vidéo.

La balise <source>

J'évoquais au début de l'article, dans le choix de la vidéo, plusieurs formats de vidéo. La balise <source> permet notamment de remplacer l'attribut src de la balise <video> par une sélection de plusieurs sources selon le contexte. Ainsi, une utilisation pourrait justement être de proposer plusieurs formats de fichiers vidéo au lieu d'un seul, le navigateur utilisant celui qu'il peut. Ce qui donnerait par exemple le code suivant, avec les trois formats de vidéo utilisés sur le web :

<video>
  <source src="video.webm" type="video/webm" />
  <source src="video.ogv"  type="video/ogg" />
  <source src="video.mp4"  type="video/mp4" />
</video>

Attention, on a également pu utiliser l'attribut media de <source> par le passé. Mais ce n'est plus le cas aujourd'hui. media n'est disponible que pour l'élément <source> d'un élément <picture>, et non pas <video>.

La balise <track>

La balise <track> permet d'ajouter des textes à la vidéo sous forme de sous-titre. Ceux-ci doivent être des fichiers au format .vtt (Ne me demandez pas comment marchent ces fichiers .vtt en terme de syntaxe, je n'ai jamais eu l'occasion de mettre le nez dedans, mais je m'y collerai probablement un jour).

<video src="video.mp4" controls>
  <track kind="subtitles" src="soustitresFR.vtt" srclang="fr">
  <track kind="subtitles" src="soustitresEN.vtt" srclang="en">
  <track kind="captions" src="captions.vtt" srclang="fr">
  <track kind="descriptions" src="descriptions.vtt" srclang="fr">
</video>

En terme de sémantique, vous pouvez également utiliser l'attribut kind de la balise pour de définir à quelle fin est utilisé le sous-titre. En gros, les utilisations sont les suivantes :

• subtitles (valeur par défaut) : les sous-titres classiques tels que vous les connaissez tous. Utiles combinés à l'attribut srclang pour définir quel fichier de sous-titres utiliser en fonction de la langue du navigateur de l'internaute.
• captions : les sous-titres sont une retranscription des effets audios de la vidéo : musique, bruitages... à destination notamment des personnes malentendantes ou tout simplement celles qui regardent la vidéo sans le son.
• descriptions : comme captions, mais cette fois-ci la retranscription est plus visuelle qu'auditive, plus pour les personnes malvoyantes.
• Il existe également d'autres valeurs pour l'attribut kind (metadata et chapters), mais celles-ci concernent une utilisation plus avancée que je ne développerai pas ici, ça vous fait déjà pas mal d'informations à digérer là.

Pour conclure...

Voilà, vous savez maintenant comment intégrer une vidéo sur un site sans passer par une plateforme externe ! Je dirais qu'après avoir assimilé tout ça, vous avez les connaissances pour réaliser une très grande majorité des besoins, félicitations !