Intégration de vidéo: <video>

4.1 Bases de la balise <video>

Intégrer une vidéo sur une page web avec l'élément <video> permet de lire du contenu vidéo directement dans le navigateur. Cet élément offre de nombreuses possibilités de configuration de la lecture, y compris la prise en charge de différents formats, ainsi que le contrôle via des attributs et des méthodes JavaScript. Voyons cet élément en détail.

Exemple très basique

La balise <video> est utilisée avec l'attribut src, qui indique le chemin vers le fichier vidéo. Vous pouvez également ajouter l'attribut controls pour afficher les contrôles standard tels que les boutons de lecture, de pause et de réglage du volume.

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

Exemple avec plusieurs sources

Pour assurer la compatibilité avec différents navigateurs, vous pouvez spécifier plusieurs sources vidéo à l'aide de la balise <source>. Cela permet au navigateur de choisir le format vidéo pris en charge.

    
      <video controls>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Votre navigateur ne supporte pas l'élément vidéo.
      </video>
    
  

Attributs de la balise <video>

• src: indique le chemin vers le fichier vidéo
• controls: affiche les contrôles de lecture
• autoplay: lit automatiquement la vidéo au chargement de la page
• loop: répète la lecture de la vidéo à la fin
• muted: désactive le son au chargement
• preload: indique comment le navigateur doit charger la vidéo. Valeurs possibles : none, metadata, auto
• width et height: définissent la largeur et la hauteur du lecteur vidéo
• poster: indique une image de prévisualisation qui s'affiche avant le début de la lecture de la vidéo

4.2 Attributs principaux

1. Lecture automatique

L'attribut autoplay fait démarrer automatiquement la lecture du fichier vidéo dès le chargement de la page. Comme pour l'audio, cet attribut doit être utilisé avec prudence pour ne pas déranger les utilisateurs.

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

2. Boucler la vidéo

L'attribut loop indique que le fichier vidéo doit être lu en boucle infinie. C'est utile pour les vidéos ou animations d'arrière-plan.

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

3. Désactiver le son

L'attribut muted coupe le son du fichier vidéo au chargement. Cela peut être utile si vous voulez que la vidéo soit lue sans son par défaut, et que l'utilisateur puisse activer le son si nécessaire.

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

4. Préchargement

L'attribut preload indique au navigateur comment il doit charger le fichier vidéo lors du chargement de la page. Il peut prendre l'une des trois valeurs :

• none: le navigateur ne doit pas précharger la vidéo
• metadata: le navigateur doit charger uniquement les métadonnées (durée, dimensions, etc.)
• auto: le navigateur doit charger complètement la vidéo lorsque la page est chargée

    
      <video src="videofile.mp4" preload="auto"></video>
    
  

5. Poster

L'attribut poster indique une image de prévisualisation qui s'affiche avant le début de la lecture de la vidéo. Cela peut être utile pour fournir à l'utilisateur des informations visuelles sur le contenu de la vidéo.

    
      <video src="videofile.mp4" poster="posterimage.jpg"></video>
    
  

4.3 Formats vidéo supportés

Pour assurer la compatibilité entre navigateurs, il est recommandé d'utiliser plusieurs formats de vidéo. Les formats les plus courants incluent MP4, WebM et OGG.

Format MP4

MP4 (MPEG-4 Part 14) est l'un des formats vidéo les plus populaires. Il est pris en charge par la plupart des navigateurs et des appareils. MP4 utilise une compression avec perte et offre une bonne qualité vidéo avec une taille de fichier relativement petite.

Exemple :

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

Format WebM

WebM est un format de compression vidéo open-source, conçu pour une utilisation sur Internet. Il est pris en charge par la plupart des navigateurs modernes et offre une bonne qualité vidéo.

Exemple :

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

Format OGG

OGG (Ogg Theora) est un format vidéo open-source pris en charge par de nombreux navigateurs. Ce format offre une bonne qualité vidéo et est souvent utilisé comme alternative à MP4 et WebM.

Exemple :

    
      <video src="videofile.ogv" type="video/ogg"></video>
    
  

Exemple d'utilisation de plusieurs formats pour assurer la compatibilité

Pour assurer la compatibilité entre navigateurs, il est recommandé de spécifier plusieurs sources vidéo dans différents formats. Le navigateur choisira le premier format pris en charge.

    
      <video width="600" controls autoplay muted>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Votre navigateur ne supporte pas l'élément vidéo.
      </video>