Aller au-delà des images avec des vidéos simples pour le Web

Découvrez les principes de base de la vidéo. Renforcez l'engagement.

Doug Sillars

Vous envisagez d'ajouter une vidéo à votre site Web ? À mesure que les appareils et les connexions réseau sont devenus plus rapides et plus puissants, vous pouvez aller au-delà des images et ajouter des vidéos à votre boîte à outils pour développer le Web. Des études montrent que les sites Web diffusant de la vidéo génèrent davantage d'engagement et de ventes. Ainsi, même si vous n'avez pas encore ajouté de vidéos à vos sites, ce sera probablement une question de temps avant de le faire.

Il est très probable que les fichiers vidéo que vous ajoutez à votre site soient les fichiers les plus volumineux téléchargés. C'est pourquoi il est extrêmement important de s'assurer que les fichiers sont créés pour une lecture rapide et régulière pour tous vos clients. Même si une vidéo peut accroître l'engagement et la satisfaction des clients, une vidéo qui ne se lance pas ou qui se bloque pendant la lecture peut être source de frustration pour les clients. Cet article se concentre sur l'utilisation de la balise HTML5 <video> pour diffuser des vidéos et ne traite donc pas des vidéos en streaming.

Commençons !

La balise <video>

Cela semble évident, n’est-ce pas ? Pour ajouter une vidéo, vous devez ajouter la balise <video>, pointer sur une source, et vous voilà parti !

<video src="myVideo.mp4">

Et vous avez raison. Au niveau le plus élevé, c'est tout ce dont vous avez besoin pour ajouter une vidéo sur le Web. Cependant, vous pouvez ajouter de nombreux attributs à la balise vidéo pour améliorer la mise en page et la diffusion de la vidéo.

Balise <source>

Le meilleur moyen d'améliorer la diffusion des vidéos sur le Web est peut-être d'optimiser les fichiers fournis au navigateur. Pour ce faire, utilisez la balise <source>:

<video>
  <source src="myWebmVideo.webm" type="video/webm">
  <source src="myh265Video.mp4" type="video/mp4">
  <source src="myh264Video.mp4" type="video/mp4">
</video>

qui fait référence à trois fichiers sources distincts. Le navigateur démarre en haut et sélectionne le premier format et codec qu’il peut utiliser. Dans le monde vidéo, le format de fichier, généralement appelé conteneur, peut être enregistré avec différents codecs, chacun avec des attributs différents. En savoir plus Dans l'exemple ci-dessus, le premier choix est le format WebM (qui peut être encodé avec les codecs VP8 ou VP9), qui est accepté (au moment de la rédaction de cet article) par 78% des utilisateurs dans le monde. Le deuxième choix est le codec H.265 de MP4, qui est compatible avec iOS et Mac. Ces codecs sont plus récents et ont amélioré la compression des données, tout en fournissant des vidéos de la même qualité que les anciens formats.

Le dernier choix de notre liste est le format MP4 H.264. Il est compatible avec 92% des utilisateurs à travers le monde, mais il s'agit d'un format plus ancien. Il est donc généralement beaucoup plus volumineux que les vidéos WebM ou H.265. Dans un exemple, vous pouvez voir la différence pour un film de deux minutes:

Envoyer des fichiers plus petits constitue la meilleure optimisation des performances pour une diffusion optimale de vos vidéos. Lorsqu'une vidéo de petite taille est téléchargée, la lecture de la vidéo a lieu plus tôt et la mémoire tampon se remplit plus rapidement. Cela réduit le nombre d'arrêts pendant la lecture de la vidéo. En outre, la charge du serveur diminue, ce qui compense les besoins de stockage supplémentaires associés à plusieurs fichiers vidéo.

Attribut "preload"

Les vidéos ne peuvent pas commencer à être lues tant qu'elles n'ont pas été téléchargées et stockées en local. L'attribut de préchargement vous permet de contrôler la durée de téléchargement de la vidéo lors du chargement de la page. Il existe trois valeurs pour l'attribut de préchargement : auto, metadata et none.

preload='auto'

Si 'auto' est utilisé, la vidéo entière sera téléchargée, que l'utilisateur appuie ou non sur le bouton de lecture. Cela permet une lecture vidéo rapide, car la vidéo est téléchargée localement avant que l'utilisateur n'appuie sur le bouton de lecture. Du point de vue de l'utilisation des données (et de la charge du serveur), n'utilisez cette option qu'en cas de forte probabilité de visionnage de la vidéo. Sinon, toutes les données du téléchargement complet d'une vidéo seront perdues.

preload='metadata'

Il s'agit du paramètre de préchargement par défaut dans Chrome et Safari. Avec 'metadata', les 3 premiers% de la vidéo sont téléchargés. Bien que cela partage des mises en garde avec 'auto', le téléchargement de seulement 3% de la vidéo entraîne un coût d'utilisation des données/serveurs beaucoup plus faible que pour l'ensemble de la vidéo, tout en garantissant qu'une partie de la vidéo est stockée localement pour un démarrage rapide de la vidéo.

preload='none'

Cela permet d'économiser le plus de données, mais entraîne un démarrage plus lent de la vidéo lorsque l'utilisateur appuie sur la lecture, car lorsque le paramètre indique l'état, zéro kilo-octet de la vidéo est préchargé localement sur l'appareil. Il s'agit du paramètre approprié pour les vidéos présentes, mais peu susceptibles d'être lues. Elle peut également être utilisée si l'utilisateur a activé le mode simplifié dans son navigateur.

poster

Si vous le souhaitez, vous pouvez afficher une image poster par-dessus la fenêtre de la vidéo avant le début de la lecture:

<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">

En ajoutant une photo au lieu d'une zone noire sur la page, vous rendez votre site Web plus attrayant et interactif. Toutefois, l'utilisation de l'attribut poster permet d'ajouter un téléchargement d'image avant le début du téléchargement de la vidéo. Pour cette raison, vous pouvez envisager d'éviter d'ajouter une affiche pour les vidéos en lecture automatique, car le téléchargement supplémentaire retarde le téléchargement de la vidéo.

Commandes de lecture

L'ajout d'un attribut controls permet d'ajouter des commandes de lecture. Sans cela, vos clients ne peuvent pas démarrer ni arrêter votre vidéo. Vous devez l'ajouter pour les vidéos afin que les utilisateurs puissent s'arrêter et se mettre en pause, régler le volume, etc. Pour les vidéos en arrière-plan ou en boucle, vous pouvez omettre cet attribut.

son coupé

L'attribut muted lance la lecture sans le son. Si aucune commande n'est fournie, le son est coupé pendant toute la durée de la lecture. Si cela est intentionnel, il peut être judicieux de supprimer la piste audio de la vidéo. Cela permet de réduire encore la taille du fichier vidéo envoyé au client.

Comme pour les conteneurs et les codecs, la suppression du fichier audio, également appelée "démuxage", sort également du cadre de cet article. Vous trouverez des instructions dans l'aide-mémoire sur la manipulation de fichiers multimédias.

loop

Pour diffuser une vidéo dont le contenu est lu en boucle (comme un GIF animé), ajoutez l'attribut loop. Étant donné que les fichiers vidéo sont généralement beaucoup plus petits que les GIF animés, ce mécanisme vous permet de remplacer vos GIF par des fichiers vidéo.

Lecture automatique de la vidéo

Si vous souhaitez que votre vidéo soit lue immédiatement (par exemple, en tant que vidéo en arrière-plan ou en boucle comme un GIF animé), vous pouvez ajouter l'attribut autoplay:

<video src="myVideo.mp4" autoplay>

Cela dit, pour qu'une vidéo soit lue automatiquement sur les navigateurs mobiles, l'attribut muted doit également être ajouté:

<video src="myVideo.mp4" autoplay muted>

Conclusion

Ajouter simplement une vidéo à votre site Web ajoutera un nouveau domaine d'engagement pour vos clients. Toutefois, il est important que vous fournissiez le contenu correctement, afin d'assurer une lecture fluide et sans blocage. L'utilisation des attributs intégrés de la balise <video> peut grandement vous aider à diffuser une vidéo impeccable auprès de tous les visiteurs de votre site Web.