Auteur Auteur

Tutoriel HTML5

I.9 L’AUDIO ET LA VIDEO

I.9 L’AUDIO ET LA VIDEO

I.9.1 L’audio

I.9.1 L’audio

Pour insérer une audio, on utilise la balise <audio> </audio> à laquelle on ajoute les attributs suivants :

  • src: pour indiquer l’URL (l’adresse) de l’audio.
  • controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement. Car ils ne figurent pas par défaut.
  • width : permet de modifier la largeur de l'outil de lecture audio.
  • Loop : indique si le fichier sera joué en boucle, c’est-à-dire le morceau sonore est joué à nouveau s’il se termine.
  • autoplay : la musique sera jouée dès le chargement de la page sans attendre le lancement par le visiteur.
  • preload : indique si la musique peut être préchargée dès le chargement de la page ou non. Cet attribut peut prendre les valeurs suivantes :
    • auto : le navigateur décide s'il doit précharger toute la musique, uniquement les métadonnées ou rien du tout. C’est la valeur par défaut.
    • metadata : charge uniquement les métadonnées (durée, etc.).
      • none : pas de pré chargement. Cette valeur est utile si vous ne voulez pas gaspiller de bande passante sur votre site.

Exemple:




<audio src="chanson.mp3" controls>    </audio>

Résultat:

Sachez que l'apparence du lecteur audio change en fonction du navigateur. Etant donné que tous les navigateurs ne reconnaissent pas tous les formats des audio, il est conseillé d’insérer plusieurs formats de la même audio pour résoudre ce problème.

Pour cela, on utilise la balise <source> qui permet de spécifier plusieurs sources audio comme le montre l’exemple suivant : 




<audio controls> 

         <source src="chanson_ogg.ogg">  

         <source src="chanson_mp3.mp3">  

         <source src="chanson_acc.acc">   

</audio>

La charge est maintenant au navigateur de choisir le format qu’il prend en compte.

I.9.2 La vidéo

I.9.2 La vidéo

Pour insérer une vidéo, on utilise la balise <video> </video>,à laquelle on peut ajouter les attributs suivants :

  • src : pour indiquer l’URL (l’adresse) de la vidéo.
  • controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement. 



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

Résultat:

  • poster : permet d’indiquer l’image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée. Par défaut, le navigateur prend la première image de la vidéo. Dans plusieurs cas, il s'agit souvent d'une image noire ou d'une image peu représentative de la vidéo, c’est pourquoi il est conseillé de créer soi-même une image.

Par exemple, j’aimerai afficher l’image suivante (une capture de la vidéo en un moment) avant le lancement de la vidéo :
vidéos en HTML 




<video src="documentaire.mp4" controls  poster="capture.png" >    </video>

Résultat:

Et voilà l’image avant le lancement de la vidéo a changé.

  • width : permet de modifier la largeur de la vidéo.
  • height : permet de modifier la hauteur de la vidéo.
  • autoplay : la vidéo sera jouée dès le chargement de la page sans attendre le lancement par le visiteur.
  • preload : indique si la vidéo peut être préchargée dès le chargement de la page ou non. Voici les valeurs possibles pour cet attribut :
    • auto : le navigateur décide s'il doit précharger toute la vidéo, uniquement les métadonnées ou rien du tout. C’est la valeur par défaut.
    • metadata : le navigateur charge uniquement les métadonnées (durée, dimensions, etc.).
    • none : pas de préchargement. Utile si vous souhaitez éviter le gaspillage de bande passante sur votre site.
Précédent
Suivant