Images, Audio et vidéo dans

une page HTML

Les images en HTML
• Il existe un format adapté à chaque image
• Si on résume, voici quel format adopter en fonction de l'image que
vous avez :
 Une photo : utilisez un JPEG ou JPG.
 N'importe quel graphique avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits ou
éventuellement un GIF.
 N'importe quel graphique avec beaucoup de couleurs : utilisez un PNG 24 bits.
 Une image animée : utilisez un GIF animé.
Insérer une image
• La balise HTML qui vous permettra d’insérer une image est la suivante : <img />
• L’attribut src va permettre d’indiquer le chemin (absolu ou relatif) de l’image.
• L’attribut alt ou texte alternatif est un attribut très important sur une image en effet il va offrir 2
possibilités importante à votre image :
• Être lu par un lecteur d’écran qui serait utilisé par un utilisateur déficient visuellement.
• L’image pourra être indexé par les moteurs de recherche
<img src="images/montagne.jpg" alt="Photo de montagne" />
• autres attributs d’une image
• Attribut title : Bulle d’aide
<img src="images/montagne.jpg" alt="Photo de montagne" title="C'est beau les Alpes quand
même !" />
• Les attributs height et width : Définissez la hauteur et la largeur
<img src="images/montagne.jpg" alt="Photo de montagne " width= " 200px « heigth= "100px" />
Miniature cliquable
<p>
Vous souhaitez voir l'image dans sa taille d'origine ? Cliquez dessus !
<br />
<a href="img/montagne.jpg"><img src="img/montagne_mini.jpg"
alt="Photo de montagne" title="Cliquez pour agrandir" /></a>
</p>
Insérer un élément audio
• Les formats audio les plus courants généralement utilisés sont les suivants :
• Le format audio Vorbis du conteneur WebM audio/webm ;
• Le format audio Vorbis du conteneur Ogg audio/ogg ;
• Le format audio MP3 audio/mpeg ;
• Le format audio PCM du conteneur WAVE audio/wave.
• Nous allons pouvoir intégrer un contenu audio dans un document avec l’élément
audio.
• Un élément audio a deux attributs src et controls.
• L’attribut src va indiquer le chemin vers la ressource à intégrer tandis que
l’attribut controls va permettre de faire apparaitre les contrôles fournis par le
navigateur (notamment un bouton de lecture / arrêt, un bouton pour choisir le
niveau sonore, etc.).
Remarque: le contenu de la balise audio sera affiché si un problème survient

<audio controls>
<source src="perfect-time.mp3"></source>
<source src="perfect-time.ogg"></source>
Problème de chargement
</audio>

Remarque: proposer plusieurs sources permet que l’audio soit accepté par plusieurs navigateurs.
Attributs de la balise audio
Vous pouvez compléter la balise par les attributs suivants :
• width : pour modifier la largeur de l'outil de lecture audio.
• loop : la musique sera jouée en boucle.
• L’attribut muted sert à définir si le son doit être initialement coupé.
• autoplay : la musique sera jouée dès le chargement de la page.
• 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 :
• auto (par défaut) : le navigateur décide s'il doit pré charger toute la musique, uniquement
les métadonnées ou rien du tout.
• metadata : charge uniquement les métadonnées (durée, etc.).
• none : pas de pré chargement. Utile si vous ne voulez pas gaspiller de bande passante sur
votre site.
Insérer des vidéos en HTML
• Un fichier vidéo est relativement plus complexe qu’un simple fichier
audio puisqu’une vidéo va être composée à la fois d’une piste audio
et d’une piste vidéo.
• Ces deux pistes vont être de formats différents et vont être
regroupées dans un conteneur qui va se charger de les faire
fonctionner ensemble.
• Les conteneurs les plus utilisés aujourd’hui sont les suivants :
• WebM : contient de l’audio Ogg Vorbis avec de la vidéo VP8/VP9 ;
• MP4 : contient de l’audio AAC ou MP3 en audio avec de la vidéo H.264.
Insérer la vidéo dans un fichier HTML
Les attributs de l’élément video
• poster : 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
• controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.
• L’attribut muted sert à définir si le son doit être initialement coupé.
• width : pour modifier la largeur de la vidéo.
• height : pour modifier la hauteur de la vidéo.
• loop : la vidéo sera jouée en boucle.
• autoplay : la vidéo sera jouée dès le chargement de la page.
• preload : indique si la vidéo peut être préchargée dès le chargement de la page ou non.
Cet attribut peut prendre les valeurs :
• auto (par défaut) : le navigateur décide s'il doit pré charger toute la vidéo, uniquement les
métadonnées ou rien du tout.
• metadata : 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.