Découvrez les principes de base de la vidéo. Renforcez l'engagement.
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 de techniques pour créer le Web. Des études montrent que les sites Web avec des vidéos génèrent un engagement et des ventes plus élevés. Même si vous n'avez pas encore ajouté de vidéos à vos sites, ce n'est probablement qu'une question de temps.
Les fichiers vidéo que vous ajoutez à votre site seront probablement les plus volumineux à télécharger. C'est pourquoi il est extrêmement important de s'assurer que les fichiers sont conçus pour une lecture rapide et stable pour tous vos clients.
Même si les vidéos peuvent augmenter l'engagement et la satisfaction client, une vidéo qui ne se lance pas ou qui se bloque pendant la lecture peut frustrer les clients.
Cet article se concentre sur l'utilisation de la balise HTML5 <video> pour diffuser des vidéos et ne traite donc pas du streaming vidéo.
C'est parti !
Balise <video>
Cela semble évident, non ? Pour ajouter une vidéo, vous devez ajouter le tag <video>, pointer vers une source, et c'est parti !
<video src="myVideo.mp4">
Et vous avez raison. En règle générale, il vous suffit de suivre ces étapes pour ajouter une vidéo sur le Web. Toutefois, 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 de vidéos sur le Web consiste peut-être à optimiser les fichiers envoyés 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>
Il fait référence à trois fichiers sources distincts. Le navigateur commence en haut et sélectionne le premier format et le premier codec qu'il peut utiliser. Dans le monde de la 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) et est compatible (au moment de la rédaction) avec 78 % des utilisateurs mondiaux. La deuxième option est le codec H.265 au format MP4, compatible avec iOS et les Mac plus récents. Ces codecs sont plus récents et offrent une meilleure compression des données, tout en offrant la même qualité vidéo que les anciens formats vidéo.
Le dernier choix de notre liste est le format H.264 MP4, qui est compatible avec 92 % de tous les utilisateurs mondiaux. Il s'agit toutefois d'un format plus ancien, et par conséquent, il est généralement beaucoup plus volumineux que les vidéos WebM ou H.265. Voici un exemple de la différence pour un film de deux minutes :
| Codec | Taille du fichier |
|---|---|
| VP8 | 5,5 Mo |
| VP9 | 4,2 Mo |
| H.265 | 5,4 Mo |
| H.264 | 16,1 Mo |
La diffusion de fichiers plus petits est la meilleure optimisation des performances que vous puissiez effectuer pour diffuser vos vidéos plus efficacement. Lorsqu'une vidéo plus petite est téléchargée, la lecture vidéo commence plus tôt et la mémoire tampon se remplit plus rapidement. Cela entraîne moins de blocages lors de la lecture vidéo. De plus, la charge du serveur diminue, ce qui compense l'augmentation des besoins de stockage de plusieurs fichiers vidéo.
Attribut "preload"
La lecture des vidéos ne peut pas commencer tant qu'une vidéo n'a pas été téléchargée et stockée localement. L'attribut preload vous permet de contrôler la quantité de vidéo téléchargée lors du chargement de la page. L'attribut preload peut prendre trois valeurs : auto, metadata et none.
preload='auto'
Si 'auto' est utilisé, la vidéo complète est téléchargée, que l'utilisateur appuie sur le bouton de lecture ou non. 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 la consommation de données (et de la charge du serveur), cette option ne doit être utilisée que lorsqu'il est très probable que la vidéo soit regardée. Sinon, toutes les données d'un téléchargement complet de la vidéo seront gaspillées.
preload='metadata'
Il s'agit du paramètre par défaut pour le préchargement dans Chrome et Safari. Lorsque 'metadata' est utilisé, les premiers 3% de la vidéo sont téléchargés. Bien que cette approche présente les mêmes réserves que 'auto', le téléchargement de seulement 3 % de la vidéo entraîne des coûts d'utilisation du serveur/des données beaucoup plus faibles que pour la vidéo entière, tout en veillant à ce qu'une partie de la vidéo soit stockée localement pour un démarrage rapide de la vidéo.
preload='none'
Cela permet d'économiser le plus de données, mais ralentit le démarrage de la vidéo lorsque l'utilisateur appuie sur le bouton de lecture. En effet, à l'état du paramètre, zéro kilo-octet de la vidéo est préchargé localement sur l'appareil. Ce paramètre est 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
Vous pouvez afficher une image poster sur la fenêtre de la vidéo avant le début de la lecture:
<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
Une vidéo sans affiche affiche un écran noir avant qu'elle ne commence.
Une vidéo avec poster est beaucoup plus attrayante.
En ajoutant une photo au lieu d'une boîte noire sur la page, vous rendez votre site Web plus attrayant et interactif. Toutefois, l'utilisation de l'attribut poster ajoute un téléchargement d'image avant le début du téléchargement de la vidéo. Pour cette raison, nous vous conseillons d'éviter d'ajouter une affiche pour les vidéos en lecture automatique (car le téléchargement supplémentaire retardera le téléchargement de la vidéo).
Commandes de lecture
Ajouter un attribut controls ajoute des commandes de lecture. Sans ces éléments, vos clients ne pourront pas lancer ni arrêter votre vidéo. Vous devez ajouter cette fonctionnalité pour les vidéos afin que les utilisateurs puissent arrêter et mettre en pause la lecture, 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 entraîne le démarrage de la lecture avec le son coupé. Si aucun contrôle n'est fourni, le son sera 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 réduit encore la taille du fichier vidéo envoyé au client.
Comme pour les conteneurs et les codecs, la suppression du fichier audio, également appelé "démuxation", dépasse le cadre de cet article. Pour en savoir plus, consultez la fiche récapitulative sur la manipulation des contenus multimédias.
boucle
Pour diffuser une vidéo en boucle (comme un GIF animé), ajoutez l'attribut loop. Comme 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 des vidéos
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" playsinline autoplay>
Toutefois, pour qu'une vidéo soit lue automatiquement dans les navigateurs mobiles, l'attribut muted doit également être ajouté :
<video src="myVideo.mp4" playsinline autoplay muted>
Conclusion
Ajouter simplement une vidéo à votre site Web ouvre un nouveau champ d'engagement pour vos clients. Toutefois, il est important de diffuser le contenu correctement, en vous assurant que la lecture de la vidéo est fluide et sans interruption. L'utilisation des attributs intégrés de la balise <video> peut vous aider à diffuser des vidéos parfaites auprès de tous les visiteurs de votre site Web.