Intégration Audio et Vidéo

Intégration Audio

Vous pouvez utiliser l'élément <audio> pour inclure des fichiers audio sur une page web. Considérons un exemple :

Dans cet exemple :

• L'élément <audio> contient un élément <source>, qui spécifie l'URL et le type de fichier de l'audio. Les formats couramment pris en charge sont MP3 et OGG ;
• L'attribut controls affiche les contrôles de lecture standard tels que lecture, pause et volume ;
• Si le navigateur de l'utilisateur ne prend pas en charge l'élément audio, un message de secours sera affiché.

Les attributs supplémentaires couramment utilisés avec l'élément audio HTML incluent :

• autoplay: commence à lire le fichier audio dès que la page se charge ;
• loop: fait que le fichier audio se répète en continu ;
• muted: coupe le son par défaut ;
• volume: spécifie le niveau de volume par défaut pour le fichier audio, allant de 0.0 (silencieux) à 1.0 (volume maximum).

Voici un exemple démontrant l'utilisation de tous ces attributs :

Intégration de Vidéo

Vous pouvez intégrer des fichiers vidéo sur une page web en utilisant l'élément <video>. Considérez l'exemple suivant :

Dans cet exemple :

• L'élément <video> contient un élément <source>, qui spécifie l'URL et le type de fichier de la vidéo. Les formats couramment pris en charge sont WebM, MP4 et OGG ;
• L'attribut controls affiche les contrôles de lecture standard ;
• Si le navigateur de l'utilisateur ne prend pas en charge l'élément vidéo, un message de secours sera affiché.

Les attributs couramment utilisés pour l'élément vidéo HTML incluent :

• autoplay : commence à lire le fichier vidéo dès que la page se charge ;
• loop : fait en sorte que le fichier vidéo boucle en continu ;
• muted : coupe le son par défaut ;
• volume : spécifie le niveau de volume par défaut pour le fichier audio, allant de 0.0 (silencieux) à 1.0 (volume maximal) ;
• poster : spécifie l'URL d'une image à afficher comme vignette de la vidéo avant que la vidéo ne soit lue ;
• width et height : spécifient la largeur et la hauteur du lecteur vidéo en pixels.

Voici un exemple démontrant l'utilisation de tous ces attributs :

Remarque

De plus, il existe de nombreuses bibliothèques JavaScript et API disponibles qui offrent des fonctionnalités supplémentaires pour lire et manipuler le contenu vidéo sur le web.