Aller au contenu principal

Insérer une vidéo ou un son

Notions théoriques​

Après les images, le HTML permet aussi d'intégrer directement des vidéos et des sons dans une page Web, sans passer par un lecteur externe comme YouTube.

La balise <video>​

La balise <video> permet d'intégrer une vidéo dans une page HTML. Ses attributs les plus importants sont :

  • src (source) : Cet attribut est obligatoire et spécifie l'URL de la vidéo. Comme pour les images, vous pouvez utiliser un chemin absolu ou un chemin relatif.

  • controls : Cet attribut affiche les contrôles de lecture (lecture, pause, volume, plein écran) fournis par le navigateur.

  • width et height : Ces attributs spécifient la largeur et la hauteur de la vidéo en pixels.

<video src="videos/bande-annonce.mp4" controls width="640" height="360"></video>
Bonne pratique - Attribut controls obligatoire

Ajoutez toujours l'attribut controls, sinon l'utilisateur n'aura aucun moyen de mettre la vidéo en pause ou de régler le volume.

La balise <audio>​

La balise <audio> fonctionne exactement de la même façon que <video>, mais pour insérer un son (musique, extrait sonore, podcast...).

<audio src="sons/theme-musical.mp3" controls></audio>
attention

Ne jamais utiliser l'attribut autoplay (lecture automatique) sans l'attribut muted (son coupé). La plupart des navigateurs bloquent de toute façon le son automatique tant que l'utilisateur n'a pas interagi avec la page. Une vidéo ou un son qui démarre bruyamment tout seul est une mauvaise expérience utilisateur.

Exemple pratique​

Imaginons que nous voulons présenter la bande-annonce et le thème musical d'un jeu vidéo :

<section>
    <h2>Bande-annonce</h2>
    <video src="videos/bande-annonce.mp4" controls width="640" height="360"></video>
</section>

<section>
    <h2>Thème musical</h2>
    <audio src="sons/theme-principal.mp3" controls></audio>
</section>

Les balises à connaître​

  • <video> : Intègre une vidéo. Attributs importants : src, controls, width, height.
  • <audio> : Intègre un son. Attributs importants : src, controls.

Test de mémorisation/compréhension​


Quelle balise est utilisée pour insérer une vidéo dans une page HTML ?


Quelle balise est utilisée pour insérer un son dans une page HTML ?


A quoi sert l'attribut controls ?


Pourquoi faut-il éviter d'utiliser autoplay sans muted ?


TP pour réfléchir et résoudre des problèmes​

Pour ce TP, vous allez ajouter une vidéo et un son à votre site sur votre jeu vidéo préféré.

Vous pouvez utiliser un extrait de bande-annonce et un extrait de thème musical, enregistrés dans les formats .mp4 et .mp3.

  1. Enregistrez vos fichiers vidéo et audio dans le même répertoire que vos fichiers HTML (par exemple dans des sous-dossiers videos/ et sons/).

  2. Utilisez la balise <video> pour insérer votre bande-annonce.

  1. Utilisez la balise <audio> pour insérer le thème musical du jeu.
Bonne pratique - Dossiers videos et sons

Comme pour les images, organisez vos fichiers vidéo et audio dans des sous-dossiers videos/ et sons/ pour garder votre projet ordonné.

📌 Une solution