HTML - Intégrer du contenu multimédia
Audio et Vidéo
Élément Audio HTML5
L'élément HTML5 <audio> vous permet d'intégrer du contenu audio dans vos pages web. Voici la syntaxe de base pour utiliser l'élément <audio> :
Conseil: Syntaxe de base de l'élément Audio HTML5
<audio src="chemin/vers/fichier/audio.mp3" controls></audio>L'attribut src spécifie le chemin vers le fichier audio que vous souhaitez intégrer. L'attribut controls ajoute des contrôles audio par défaut, tels que lecture, pause et volume, au lecteur audio.
Voici quelques attributs couramment utilisés pour l'élément <audio> :
| Attribut | Description |
|---|---|
autoplay |
Démarre automatiquement la lecture de l'audio lorsque la page se charge. |
loop |
Répète la lecture audio indéfiniment. |
muted |
Coupe le son de l'audio par défaut. |
preload |
Spécifie comment le fichier audio doit être chargé (par exemple, "auto", "metadata", ou "none"). |
L'élément <audio> prend en charge divers formats audio, notamment :
- MP3 (
.mp3) - WAV (
.wav) - OGG (
.ogg)
Conseil: Intégration d'un fichier audio avec l'élément <audio>
<audio src="musique.mp3" controls autoplay loop>
Votre navigateur ne prend pas en charge l'élément audio.
</audio>Élément Vidéo HTML5
L'élément HTML5 <video> vous permet d'intégrer du contenu vidéo dans vos pages web. Voici la syntaxe de base pour utiliser l'élément <video> :
Conseil: Syntaxe de base de l'élément Vidéo HTML5
<video src="chemin/vers/fichier/video.mp4" controls></video>L'attribut src spécifie le chemin vers le fichier vidéo que vous souhaitez intégrer. L'attribut controls ajoute des contrôles vidéo par défaut, tels que lecture, pause et volume, au lecteur vidéo.
Voici quelques attributs couramment utilisés pour l'élément <video> :
| Attribut | Description |
|---|---|
autoplay |
Démarre automatiquement la lecture de la vidéo lorsque la page se charge. |
loop |
Répète la lecture vidéo indéfiniment. |
muted |
Coupe le son de la vidéo par défaut. |
poster |
Spécifie une image à afficher pendant le téléchargement de la vidéo ou jusqu'à ce que l'utilisateur lance la lecture. |
width et height |
Définit la largeur et la hauteur du lecteur vidéo. |
L'élément <video> prend en charge divers formats vidéo, notamment :
- MP4 (
.mp4) - WebM (
.webm) - OGG (
.ogg)
Conseil: Intégration d'un fichier vidéo avec l'élément <video>
<video src="film.mp4" controls width="640" height="360">
Votre navigateur ne prend pas en charge l'élément vidéo.
</video>Intégration de médias externes
Intégration de vidéos YouTube
Vous pouvez intégrer des vidéos YouTube dans vos pages web en utilisant l'élément <iframe>. Pour obtenir le code d'intégration d'une vidéo YouTube :
- Allez sur la vidéo YouTube que vous souhaitez intégrer.
- Cliquez sur le bouton "Partager" sous la vidéo.
- Cliquez sur l'option "Intégrer" pour obtenir le code d'intégration.
Conseil: Code d'intégration YouTube
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>Remplacez VIDEO_ID par l'identifiant de la vidéo YouTube que vous souhaitez intégrer.
Vous pouvez personnaliser le lecteur YouTube intégré en modifiant les paramètres d'URL dans l'attribut src. Voici quelques paramètres courants :
| Paramètre | Description |
|---|---|
autoplay=1 |
Lance automatiquement la lecture de la vidéo au chargement |
loop=1 |
Répète la lecture de la vidéo indéfiniment |
controls=0 |
Masque les contrôles par défaut de la vidéo |
Intégration de vidéos Vimeo
L'intégration de vidéos Vimeo est similaire à celle des vidéos YouTube. Vous devrez utiliser l'élément <iframe> avec le code d'intégration. Pour obtenir le code d'intégration d'une vidéo Vimeo :
- Allez sur la vidéo Vimeo que vous souhaitez intégrer.
- Cliquez sur le bouton "Partager" sous la vidéo.
- Cliquez sur l'onglet "Intégrer" pour obtenir le code d'intégration.
Conseil: Code d'intégration Vimeo
<iframe src="https://player.vimeo.com/video/VIDEO_ID" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>Remplacez VIDEO_ID par l'identifiant de la vidéo Vimeo que vous souhaitez intégrer.
Vous pouvez personnaliser le lecteur Vimeo intégré en modifiant les paramètres d'URL dans l'attribut src ou en utilisant les options du générateur de code d'intégration sur Vimeo.
Intégration d'audio depuis SoundCloud
SoundCloud fournit un code d'intégration <iframe> pour intégrer des pistes audio dans vos pages web. Pour obtenir le code d'intégration d'une piste SoundCloud :
- Allez sur la piste SoundCloud que vous souhaitez intégrer.
- Cliquez sur le bouton "Partager" sous la forme d'onde de la piste.
- Cliquez sur l'onglet "Intégrer" pour obtenir le code d'intégration.
Conseil: Code d'intégration SoundCloud
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/TRACK_ID&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>Remplacez TRACK_ID par l'identifiant de la piste SoundCloud que vous souhaitez intégrer.
Vous pouvez personnaliser le lecteur SoundCloud intégré en modifiant les paramètres d'URL dans l'attribut src ou en utilisant les options du générateur de code d'intégration sur SoundCloud.
Considérations d'accessibilité
Lors de l'ajout de contenu multimédia à vos pages web, vous devez penser à l'accessibilité pour tous les utilisateurs, y compris ceux ayant des handicaps. Voici quelques considérations d'accessibilité importantes à garder à l'esprit :
Fournir du contenu alternatif pour le multimédia
Pour rendre votre contenu multimédia accessible aux utilisateurs qui pourraient ne pas être en mesure de le voir ou de l'entendre, vous devez fournir du contenu alternatif. Cela peut inclure :
| Contenu alternatif | Description |
|---|---|
| Transcriptions textuelles | Pour le contenu audio |
| Sous-titres | Pour le contenu vidéo |
| Textes descriptifs alternatifs | Pour les images et les vidéos |
Vous pouvez fournir des transcriptions textuelles et des sous-titres en utilisant l'élément <track> à l'intérieur des éléments <audio> ou <video>.
Conseil: Fournir du contenu alternatif pour le multimédia
<video src="video.mp4" controls>
<track src="captions.vtt" kind="captions" srclang="en" label="Sous-titres en anglais">
Votre navigateur ne prend pas en charge l'élément vidéo.
</video>L'élément <track> est utilisé pour spécifier un fichier (captions.vtt) qui contient les sous-titres de la vidéo. L'attribut kind est défini sur "captions" pour indiquer que la piste est destinée aux sous-titres, et l'attribut srclang spécifie la langue des sous-titres.
Assurer l'accessibilité au clavier pour les médias intégrés
Lorsque vous intégrez des médias provenant de sources externes comme YouTube, Vimeo ou SoundCloud, vous devez vous assurer que le lecteur multimédia intégré est accessible au clavier. Cela signifie que les utilisateurs devraient pouvoir contrôler le lecteur à l'aide de commandes clavier, telles que :
- La barre d'espace pour lire/mettre en pause
- Les touches fléchées pour avancer ou reculer
- La touche TAB pour se déplacer entre les contrôles
La plupart des lecteurs multimédias intégrés provenant de sources réputées sont conçus en tenant compte de l'accessibilité au clavier. Cependant, vous devriez tester l'accessibilité au clavier de vos médias intégrés pour vous assurer qu'elle fonctionne comme prévu.
Vous devriez également fournir des instructions ou des étiquettes claires pour tous les contrôles multimédias personnalisés que vous créez afin de vous assurer que tous les utilisateurs, y compris ceux utilisant des technologies d'assistance, peuvent les comprendre et les utiliser.