Développement Web 1

Les objets multimédias

Chapitre 4

Enseignante : Mme L. MANSOURI

1
Les objets multimédias
Les différents formats d'images
Toutes les images diffusées sur Internet ont un point commun :
elles sont compressées. Cela veut dire que l'ordinateur fait
des calculs pour qu'elles soient moins lourdes et donc plus
rapides à charger.

Le JPEG(Joint Photographic Expert Group)

sont très répandues sur le Web.
Ce format est conçu pour réduire le poids des photos
(c'est-à-dire la taille du fichier associé) ,
qui peuvent comporter plus de 16 millions de couleurs différentes
Les images JPEG sont enregistrées avec l'extension .jpg ou .jpeg
le JPEG détériore un peu la qualité de l'image,( d'une façon peu
Remarquable avec les photos). →efficace pour réduire le poids
des photos.

2
Le PNG (Portable Network Graphics)

Ce format est adapté à la plupart des graphiques .

Le PNG a deux gros avantages :
▪ Il peut être rendu transparent
▪ Il n'altère pas la qualité de l'image.

Le PNG existe en deux versions, en fonction du nombre de

couleurs que doit comporter l'image :
▪ PNG 8 bits : 256 couleurs ;
▪ PNG 24bits : 16 millions de couleurs(autant qu'une image JPEG)

La compression du JPEG est plus puissante sur les photos.

Une photo enregistrée en JPEG se chargera toujours beaucoup
plus vite que si elle était enregistrée en PNG.
Il est conseillé donc toujours de réserver le format JPEG
aux photos. 3
Le GIF (Graphic Interchange Format)

✓ C'est un format assez vieux, très utilisé.

✓ Le format GIF est limité à 256 couleurs.
✓ le GIF conserve un certain avantage que le PNG n'a pas :
il peut être animé.

4
En résumé :

Il existe un format adapté à chaque image :

▪ Une photo : utilisez un JPEG.

▪ 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é.

5
Insertion d'une image
Balise : <img /> C'est une balise orpheline.

La balise doit être accompagnée de deux attributs obligatoires:

▪ src : il permet d'indiquer où se trouve l'image que l'on veut

insérer.
▪ alt : cela signifie « texte alternatif ». On doit toujours
indiquer un texte alternatif à l'image, c'est-à-dire un court
texte qui décrit ce que contient l'image. Ce texte sera affiché
à la place de l'image si celle-ci ne peut pas être téléchargée
ou dans les navigateurs de personnes.
Cela aide aussi les robots des moteurs de recherche pour les
recherches d'images.

6
Ajouter une infobulle

L'attribut permettant d'afficher une bulle d'aide est le

même que pour les liens : il s'agit de title. Cet attribut est
facultatif.
Exemple:
<p>Voici une photo que j'ai prise lors de mes dernières
vacances<br />
<img src="images/montagne.jpg" alt="Photo de montagne"
title="C'est beau les Alpes quand même !" />
</p>

7
 adresse absolue
On indique l'adresse complète de la page ou de l'image.
Par exemple :
http://www.cgmatane.qc.ca/images/mon_image.jpg

SRC

adresse relative
Utilisé pour lier une page ou une image du même site.
Le fichier sera recherché relativement à la page courante :
1. Si l'image se trouve dans le même dossier que la page Web,
on indique que le nom de l'image. Par exemple : <img src= "fond.jpg"/>
2. Si l'image se trouve dans un sous dossier, par exemple le dossier
"images " . Par exemple :<img src="images/mon_image.jpg" />
3. Si l'image se trouve dans le dossier parent (de niveau supérieur),
on y accède grâce à « .. » (deux points) pour remonter d'un niveau.
Par exemple : <img src=« ../images/mon_image.jpg" />
8
 Exemple

Exemple

Exemple

9
 Les figures
<figure>
Les figures sont des éléments qui viennent enrichir le texte
pour compléter les informations de la page.
Les figures peuvent être de différent types :
▪images ;
▪codes source ;
▪citations ;
▪etc.

Tout ce qui vient illustrer le texte est une figure.

Nous allons ici nous intéresser aux images mais,
contrairement à ce qu'on pourrait croire, les figures ne sont pas
forcément des images : un code source aussi illustre le texte.

10
 Les figures
Une figure est le plus souvent accompagnée d'une légende.
Pour ajouter une légende, utilisez la balise <figcaption>
à l'intérieur de la balise <figure>, comme ceci :

<figure>
<img src="images/word.png" alt= " word 2010" />
<figcaption>Microsoft Word 2010</figcaption>
</figure>

11
 Les figures
Une figure peut très bien comporter plusieurs images:
<figure>
<img src="images/opera.png" alt="Logo opera" />
<img src="images/firefoxpera.png" alt="Logo Mozilla Firefox"/>
<img src="images/chrome.png" alt="Logo Google Chrome"/>
<figcaption>Logos des différents navigateurs</figcaption>
</figure>
En css:
figure
{
background-color:silver;
text-align:center;
width:40%;
height:50;
}

12
Les images et le css3
Images arrondies:
Utilisez la propriété border-radius pour créer des images
arrondies.
Exemples:
img {
border-radius: 15px;
}

img {
border-radius: 50%;
}

13
 Opacité et transparence de l’image

.  La propriété opacity définit la transparence d'un élément.

Autrement dit, elle permet de définir le degré de visibilité de
l'arrière-plan sur lequel est placé .
 Syntaxe permettant d'appliquer une transparence à une image
ou à un autre élément :
opacity: valeur
 Valeur à virgule flottante comprise entre 0,0 (100 %
transparent) et 1,0 (100 % opaque)
Exemple de transparence

Original Avec transparence

 Les formats audio

Pour diffuser de la musique ou n'importe quel son, il existe de

nombreux formats. La plupart d'entre eux sont compressés ce
qui permet de réduire leur poids :

▪ MP3 : C'est l'un des plus vieux, mais aussi l'un des plus
compatibles (tous les appareils savent lire des MP3),
▪ AAC : utilisé majoritairement par Apple sur iTunes, c'est un
format de bonne qualité.
▪ OGG : le format Ogg Vorbis est très répandu dans le monde
du logiciel libre, notamment sous Linux. Ce format a l'avantage
d'être libre, c'est-à-dire qu'il n'est protégé par aucun brevet.
▪ WAV (format non compressé) : A éviter car le fichier est
très volumineux avec ce format.

16
Insertion d'un élément audio
L'élément HTML <audio> est utilisé afin d'intégrer un contenu
sonore dans un document.
<audio src=" …"></audio>
Les attributs suivants :
▪ controls: pour ajouter les boutons « Lecture », « Pause » et la
barre de défilement.
▪ width: pour modifier la largeur de l'outil de lecture audio.
▪ loop: la musique sera jouée en boucle.
▪ autoplay: la musique sera jouée dès le chargement de la page.
A Éviter!
▪ 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.
✓ metadata: charge uniquement les métadonnées (durée, etc.)
✓ none: pas de préchargement. 17
Exemple :

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

Affichage sur google :

Affichage sur FireFox:

18
Utilisation de l’élément <source>

La balise audio peut contenir une ou plusieurs sources audio

représentées avec l'attribut src ou l'élément <source>.
S'il y a plusieurs sources, l'agent utilisateur choisira celle qui
convient le mieux.
Exemples :
<audio controls="controls">
<source src="toto.wav" type="audio/wav">
Votre navigateur ne prend pas en charge l'élément
</audio>

<audio controls="">
<source src="toto.opus" type="audio/ogg; codecs=opus"/>
<source src="toto.ogg" type="audio/ogg; codecs=vorbis"/>
<source src="toto.mp3" type="audio/mpeg"/>
</audio>

19
La vidéo
Les formats vidéo
Pour le stockage de la vidéo, on a besoin de trois éléments :
▪ Un format conteneur : c'est un peu comme une boîte qui va servir
à contenir les deux éléments ci-dessous. On reconnaît en général le
type de conteneur à l'extension du fichier : AVI, MP4, MKV…
▪ Un codec audio : c'est le format du son de la vidéo, généralement
compressé. On utilise les mêmes : MP3, AAC, OGG…
▪ Un codec vidéo : c'est le format qui va compresser les images. Ces
formats sont complexes et on ne peut pas toujours les utiliser
gratuitement. Les principaux à connaître pour le Web sont :
✓ H.264 : l'un des plus puissants et des plus utilisés aujourd'hui…
mais il n'est pas 100% gratuit. En fait, on peut l'utiliser
gratuitement dans certains cas (comme la diffusion de vidéos sur
un site web personnel).
✓ Ogg Theora : un codec gratuit et libre de droits, mais moins
puissant que H.264. Il est bien reconnu sous Linux mais, sous
Windows, il faut installer des programmes pour pouvoir le lire.
✓ WebM : un autre codec gratuit et libre de droits, plus récent.
Proposé par Google. 20
Insertion d'une vidéo

<video src=" ….."></video>

attributs de la balise vidéo:
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 mais, comme
il s'agit souvent d'une image noire ou d'une image peu représentative de la
vidéo,! Vous pouvez faire une capture d'écran d'un moment de la vidéo.
controls: pour ajouter les boutons « Lecture », « Pause » et la barre de
défilement.
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. A éviter
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.
21
Exemple
<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

</body>
</html>

22