Comment insérer ses vidéos en HTML ?

Pour attirer l'attention, agrémenter un contenu ou encore présenter un produit ou un service : 91 % des entreprises utilisent la vidéo sur leurs supports web. Pour optimiser cette intégration, il existe différentes solutions d'hébergement vidéo comme le Content Hub de HubSpot qui facilite la gestion et la distribution de contenu vidéo. Depuis HTML5, l'élément <video> permet d'intégrer facilement et efficacement une vidéo sur une page web. Le code HTML de base est ainsi rédigé dans l'éditeur HTML : <video src="url source">Texte</video>. Son fonctionnement est similaire à celui de l'élément image HTML : le navigateur récupère la vidéo en suivant le chemin indiqué par l'attribut src. Entre les balises, il est possible d'écrire du texte, à afficher à la place du lecteur au cas où le navigateur ne parvient pas à afficher la vidéo. D'autres attributs permettent de contrôler la manière dont la vidéo est rendue à l'écran.

L'élément HTML <video> permet d'intégrer une vidéo qui est hébergée sur les serveurs du développeur. À défaut, deux autres possibilités permettent d'insérer une vidéo en HTML.

• Un lien HTML permet de rediriger vers la page qui héberge la vidéo, ou de proposer aux internautes de télécharger la vidéo. Le contenu, dans ce cas, n'est pas directement intégré sur la page web : l'UX est moins bonne.
• Des sites tels que YouTube et Vimeo hébergent des vidéos, puis fournissent les morceaux de code HTML à intégrer sur les pages web pour y afficher les vidéos. Ainsi, le développeur obtient le code clé en main pour importer la vidéo depuis le site tiers. On parle d'Iframe. Il faut être attentif, dans ce cas, aux politiques de sécurité et de confidentialité des sites tiers.

Pour une gestion plus avancée du contenu vidéo, il existe différents outils d'hébergement vidéo comme les outils d'hébergement vidéo de HubSpot qui permettent de créer, héberger et analyser les performances vidéo directement depuis la plateforme.

src

L'attribut src est obligatoire pour intégrer un élément vidéo en HTML. Cet attribut en effet indique l'URL source, c'est-à-dire le chemin à suivre pour récupérer le contenu à afficher.

Tous les navigateurs ne prennent pas en charge tous les formats de vidéos. Pour être sûr que la vidéo s'affiche, il est possible de fournir plusieurs URL sources, avec la vidéo sous différents formats. Le navigateur suit alors le chemin vers la vidéo dont il supporte le format.

Pour indiquer plusieurs sources, il faut renseigner le code HTML :

<video>

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

<source src="video.webm" type="video/webm" />

</video>

controls

L'attribut controls indique au navigateur qu'il faut afficher les commandes de contrôle sur le lecteur vidéo. Avec controls, l'internaute actionne la lecture de la vidéo et peut la mettre en pause, il contrôle le son, il peut afficher la vidéo en plein écran, avancer et revenir en arrière. Si l'attribut controls n'est pas indiqué dans l'élément HTML de la vidéo, les commandes n'apparaissent pas.

See the Pen attribut-controls_video-html by HubSpot France (@HubSpot-France) on CodePen.

width et height

Les attributs width et height personnalisent respectivement la largeur et la hauteur de la zone où la vidéo est affichée. Ces attributs de taille sont facultatifs. S'ils ne sont pas renseignés, le navigateur affiche la vidéo dans sa taille d'origine. Si un seul attribut de taille est renseigné dans l'élément HTML de la vidéo, la taille est personnalisée en respectant le rapport largeur/hauteur d'origine.

See the Pen attributs-taille_video-html by HubSpot France (@HubSpot-France) on CodePen.

poster

L'attribut poster de l'élément HTML de la vidéo sert à définir la vignette d'aperçu. Il est ainsi possible de choisir l'image qui apparaît sur la page web tant que la vidéo n'est pas lancée. L'attribut poster est facultatif : s'il n'est pas renseigné, la vignette d'aperçu correspond à la première image de la vidéo.

Pour choisir une vignette d'aperçu, il faut indiquer une URL source pour l'image à utiliser. Exemple :

See the Pen attribut-poster_video-html by HubSpot France (@HubSpot-France) on CodePen.

autoplay

L'attribut autoplay dans l'élément HTML de la vidéo indique au navigateur de démarrer la lecture dès que la page web est chargée. Sans l'attribut autoplay, la vidéo ne démarre que lorsque l'internaute déclenche la lecture. Cet attribut est utile lorsque la vidéo sert d'arrière-plan, dans un but esthétique. Les images défilent ainsi en fond, sans action de l'internaute.

loop

L'attribut loop indique au navigateur qu'il faut lire la vidéo en boucle. C'est un attribut booléen facultatif : sans loop, le lecteur s'arrête dès que la vidéo est terminée. Combiné à l'attribut autoplay, le loop agrémente une page web en jouant la vidéo en continu.

muted

L'attribut muted de l'élément HTML de la vidéo est un attribut booléen, facultatif. S'il est indiqué, la vidéo, par défaut, est lue sans le son. L'internaute doit cliquer sur le bouton de commande pour entendre le son. Insérer cet attribut est recommandé, pour éviter le dérangement sonore si la vidéo est lancée dans un lieu public.

Les bonnes pratiques à considérer pour rendre les vidéos en HTML accessibles

Insérer des sous-titres et des légendes

Les sous-titres transcrivent en texte les paroles de la vidéo. Les légendes transcrivent en texte les sons de la vidéo qui sont importants à sa compréhension : « coup de tonnerre », par exemple. Ajouter des sous-titres et des légendes sur une vidéo permet de :

• Rendre une vidéo accessible aux sourds et aux malentendants, en vue d'optimiser son site web.
• Rendre une vidéo compréhensible sans le son pour être lue dans un lieu public.
• Rendre une vidéo accessible à des utilisateurs du monde entier, si les sous-titres sont traduits en langues étrangères.

Pour ajouter des sous-titres et des légendes, il faut tout d'abord enregistrer les textes dans un fichier avec l'extension .vtt. Il faut ensuite intégrer les textes dans l'élément HTML de la vidéo, en utilisant l'élément HTML <track> avec un attribut src qui envoie vers le fichier .vtt. L'élément <track>, comme l'élément HTML <video>, peut avoir des attributs. Un attribut kind, par exemple, sert à indiquer s'il s'agit de sous-titres « subtitles » ou de légendes « captions ».

Ajouter de l'audiodescription

Dans un objectif d'accessibilité, il est judicieux d'ajouter de l'audiodescription sur les vidéos en HTML. L'audiodescription consiste à décrire, en voix-off, les images de la vidéo. Cela permet aux personnes aveugles et malvoyantes d'accéder au contenu dans de bonnes conditions.

Pour ajouter de l'audiodescription, il faut enregistrer une bande-son. La bande-son qui décrit la vidéo en HTML peut ensuite être intégrée sur la page web, avec l'élément HTML <audio>. Les deux éléments prennent des attributs obligatoires et facultatifs similaires. L'audiodescription peut être ajoutée avec le code HTML : <audio src="url source">Texte</audio>.

FAQ sur l'intégration vidéo HTML

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez le CMS de HubSpot.