Intégration de vidéos en HTML

L'importance de l'intégration de vidéos

Incorporer des vidéos sur un site web permet d'offrir des pages dynamiques et enrichissantes, ce qui attire l'attention des visiteurs. Cependant, tout comme pour les images, il est crucial de considérer l'impact sur l'expérience utilisateur, notamment en ce qui concerne la bande passante et l'accessibilité.

Codec et format des vidéos

Il est important de noter que, à moins que les vidéos ne soient préchargées ou configurées pour se lancer automatiquement, leur effet sur la vitesse de chargement des pages devrait être minimal. Il convient de prêter attention à la taille des fichiers vidéo afin de garantir leur facilité de streaming pour le plus grand nombre possible d'utilisateurs.

En général, une vidéo est composée de plusieurs éléments : 1. La série d'images qui compose la vidéo. 2. L'audio qui accompagne ces images. 3. Les sous-titres ou légendes éventuels.

Il existe donc une distinction entre le codec utilisé pour coder chacun de ces éléments et le format contenant tous ces éléments. La prise en charge de ces formats dépend des navigateurs, chaque nouvelle génération de codecs visant à offrir une meilleure compression tout en conservant une qualité optimale.

Le format MP4 est le conteneur le plus universellement accepté, car il supporte le plus grand nombre de codecs. C'est pourquoi il est souvent choisi par défaut. En ce qui concerne les codecs audio, l'AAC est privilégié pour sa compression efficace et son adoption répandue. Quant aux codecs vidéo, on retrouve principalement deux types : - MP4 avec H.264 et AAC : Cela garantit une compatibilité avec presque tous les navigateurs. - MP4 avec AV1 et AAC : Idéal pour le streaming de fichiers de petite taille, ce qui offre une meilleure compression et qualité, mais avec une compatibilité réduite.

Insertion d'une vidéo

Pour inclure une vidéo dans une page, il faut utiliser les balises <video> qui s'ouvrent et se ferment. Les balises <source> doivent être imbriquées à l'intérieur des balises <video> :

  
  
  ...
  Some text

Exemple :

  
  Sorry, your browser doesn't support this video. Click  here to download it instead.

Ce code va générer :
- Des contrôles de lecture, l'autoplay, et la fonction de lecture en boucle. - Une image miniature avec poster="big_bunny.jpg". - L'indication de la source vidéo big_bunny.mp4 et son type MIME, video/mp4. - Un texte d'alternative pour permettre à l'utilisateur de télécharger la vidéo.

Améliorer l'accessibilité des vidéos

L'utilisation de vidéos comme arrière-plan d'une page web est généralement à éviter. Il est souvent préférable d'opter pour une image statique, afin d'éviter les problèmes potentiels causés par le mouvement, et pour mieux accompagner les utilisateurs de lecteurs d'écran. Cependant, si l'inclusion d'une vidéo d'arrière-plan est nécessaire, voici quelques bonnes pratiques :

1. Si la vidéo est purement décorative, utilisez aria-hidden="true" pour indiquer aux lecteurs d'écran qu'elle ne porte pas de contenu ou de contexte utile.
2. Utilisez la requête de média CSS prefers-reduced-motion pour désactiver l'autoplay pour les utilisateurs qui le souhaitent.
3. Offrez des légendes ou descriptions ARIA pour transmettre le même contenu aux personnes qui ne peuvent pas accéder aux vidéos.

Les légendes peuvent être intégrées dans l'élément <video> à l'aide de la balise <track>, avec les attributs suivants : - kind pour spécifier de quelle sorte de texte il s'agit (légende, sous-titre, etc.). - label qui décrit comment cette option est affichée à l'utilisateur. - srclang pour indiquer la langue de la légende. - src pour localiser le fichier des légendes au format WebVTT (avec l'extension .vtt).

Exemple :

  
  
  
  
  Sorry, your browser doesn't support this video. Click  here to download it instead.