Intégration de fichiers multimédia à une page HTML

IUT TC
2006-2007
S2 – Intégration de fichiers multimédia dans une page HTML
Pensez à sauvegarder fréquemment dans votre espace de travail les documents que vous réalisez !
Le but de ce TP est d'ajouter une galerie multimédia (insertion de vidéos, de sons et d’animations flash) au site construit la
semaine dernière.
Démarrez NVU et créez dans le répertoire "pages" de votre site une page nommée galerie.html
Important : La possibilité d'afficher des objets multimédias dans une page Web
dépendra beaucoup de la configuration de l'ordinateur et du navigateur de
l'internaute qui visite la page. Il suffit que les navigateurs ne soient pas configurés
correctement ou ne contiennent pas les bons plug-ins pour que certains formats ne
soient pas lus !! Et cela peut donc arriver pendant ce TP !!!
1. L ES
BALISES D ' INSERTION D ' OBJETS MULTIMEDIA
D'une manière générale, deux possibilités existent pour avoir un fichier multimédia dans une page web, correspondant
chacune à une balise différente:
<a href> Evidemment c'est la manière la plus simple d'attaquer le problème, mais on réalise un lien plus qu'une
insertion. On peut donc créer un lien qui ouvrira le lecteur par défaut sur l'ordinateur de l'internaute, parfois dans une nouvelle
fenêtre.
<object> C'est une balise récente, très puissante, qui permet d'incruster des programmes, des fichiers audio, vidéo,
des animations interactives,…dans un fichier HTML. La syntaxe est la suivante :
<object> … </object>
La balise <object> possède plusieurs attributs dont ceux qui permettent de spécifier la localisation et le type du fichier à
insérer (data, type), et les attributs de mise en forme classiques (height, width). La balise <param> sera utilisée dans la balise
<object> pour donner plus d'information au navigateur.
2. I NSERTION D ' UN SON
Plusieurs possibilités existent pour mettre du son sur une page html (son au format AIF, WAV, AU, MP3, QuickTime, Real
Audio, Midi,,..). L'inconvénient des trois premiers formats (Aif sur Macintosh et Wav sur Windows) est qu'ils ne sont pas
compressés. Ainsi, un fichier MP3 est à peu près dix fois moins lourd que son équivalent en WAV, pour une sonorité très
semblable. Donc, comme pour les images et les autres éléments non textuels, vérifiez que leur taille est "acceptable".
1
IUT TC
2006-2007
Voici le code pour incorporer un document wav :
<object type="audio/x-wav" data="./media/nomduson.wav" height="hauteur"
width="largeur">
<param name="src" value="./media/nomduson.wav">
<param name="autoplay" value="false">
<param name="autostart" value="0">
</object>
Les paramètres relatifs au fichier sont spécifiés par l'intermédiaire de la balise param. Internet Explorer a parfois besoin du
paramètre src pour localiser correctement le fichier. En outre, le paramètre autoplay est compréhensible par QuickTime,
autoStart par Windows Media Player et Real Audio. Ces paramètres permettent de démarrer automatiquement la
lecture du son dès le chargement de la page. Le répertoire « média » contient plusieurs fichiers wav. Choisissez en un et
incorporez-le dans votre page galerie.html (en le copiant dans le dossier « media » de votre site).
De la même manière que pour les images et autres documents, les objets multimédia ne font
pas partie de la page HTML, on intègre seulement leur nom. D'où l'intérêt de recopier les
objets dans le dossier (ou un sous-dossier) de votre site, et de ne pas déplacer les pages sans
les fichiers d'images qu'elles contiennent
Voici l’aspect du lecteur des sons dans Firefox et dans Explorer, avec les paramètres width= « 100 » et height= « 100 » :
3. I NSERTION D ' UNE
VIDEO
Choisissez une vidéo parmi celles disponibles dans le répertoire « média ». Une fois la vidéo stockée dans le répertoire
« média » de votre site, vous intégrez directement votre vidéo sur votre page. Cependant, le code HTML à insérer dépend du
format de la vidéo (vidéo Real, Quicktime, Windows Media ou bien Flash)
Voici le code pour incorporer un document mov (QuickTime) :
2
IUT TC
2006-2007
<object type="video/quicktime" data="./media/nomdelavideo.mov" height="hauteur"
width="largeur">
<param name="src" value="./media/nomdelavideo.mov">
<param name="autoplay" value="false">
<param name="loop" value="false">
<param name="controller" value="true">
</object>
Si vous ne désirez pas les boutons de contrôle, changez la valeur du paramètre "controller" à false. Voici l’aspect du lecteur
vidéo pour le fichier « fish.mov » avec height="340" et width="340" sur Firefox* :
Publier une vidéo dans une page web n'est pas toujours évident: Selon le format (AVI, MPG, MOV...) une configuration
spécifique est nécessaire pour les visionner. En revanche, la quasi-totalité des navigateurs possèdent le plugin Flash (SWF).
Donc, en publiant en Flash, beaucoup plus d’internautes pourront voir vos vidéos sans problème. L’insertion des objets Flash
est donc le sujet de la section suivante.
4. I NSERTION D ' UN OBJET F LASH
Voici le code pour insérer un objet flash dans un document HTML :
<object
type="application/x-shockwave-flash"
height="hauteur"
width="largeur"
data="adresse_de_votre_fichier">
<param name="movie" value="adresse_de_votre_fichier" /></object>
Plusieurs animations Flash sont disponibles dans le sous-répertoire animFlash du répertoire du TP. Toutes les animations
(sauf moebius.swf) ont les dimensions conseillées de 360 x 180 et ont été créées par Christian Paulos de Quesaco
(http://www.quesaco.org) :
*
Attention : ce code risque de ne pas fonctionner sur Internet Explorer qui a besoin de beaucoup plus d’informations pour afficher une
vidéo !!
3
IUT TC
2006-2007
blclock.swf
filclock.swf
chenille.swf
feudartifice.swf
serpentin.swf
shootwave.swf
ver3D.swf
moebius.swf
Copiez l’animation que vous désirez insérer dans le répertoire média de votre site, et ajoutez-le à votre page galerie.html. Par
exemple, pour insérer l'animation appelée chenille.swf, on écrira
<object type="application/x-shockwave-flash" height="60" width="120"
data="./medias/chenille.swf">
<param name="movie" value="./medias/chenille.swf" />
<img src="error.jpg"/>
</object>
L’image dans la balise <img> continue dans <object> permet d’afficher une image lorsque le contenu flash ne peut pas être
affiché. Le répertoire média contient 4 images, choisissez une et ajoutez la à votre site.
5. L’ ART
ET
HTML
Piet Mondrian (prononcé : Pît Mon-dri-anne), né le 7 mars 1872 à Amersfoort, aux Pays-Bas, et mort le 1er février 1944 à
New York, aux États-Unis, était un peintre hollandais, reconnu comme un des pionniers de l'abstraction. Il travailla à la fin de
sa vie essentiellement avec des couleurs primaires : le rouge, le jaune et le bleu, qu'il associe au blanc qui lui sert de fond et
au noir qui délimite les couleurs entre elles. Il a structuré ses œuvres de manière géométrique en utilisant essentiellement
des formes rectangulaires (source : Wikipedia).
L’objectif de cet exercice est donc de reproduire un tableau de Piet Mondrian en utilisant HTML. Voici les modèles
proposés :
4
IUT TC
2006-2007
Et voici quelques exemples de regroupement de cellules d’un tableau qui peuvent vous être utiles :
REGROUPEMENT DE COLONNES
<table width="75%" border="1">
<tr>
<td colspan="2">ligne1, colonne 1 et 2</td>
<td>ligne1, colonne3</td>
</tr>
<tr>
<td>ligne2, colonne1</td>
<td>ligne2, colonne2</td>
<td>ligne2, colonne3</td>
</tr>
</table>
REGROUPEMENT DE LIGNES
<table width="75%">
<tr>
<td rowspan="2">ligne 1 et 2, colonne1</td>
<td>ligne1, colonne2</td>
<td>ligne1, colonne3</td>
</tr>
<tr>
<td>ligne2, colonne2</td>
<td>ligne2, colonne3</td>
</tr>
</table>
6. M ISE
EN PAGE ET INTEGRATION DE LA GALERIE
Complétez votre page galerie.html en ajoutant des descriptions des fichiers que vous avez ajoutés. Insérez un lien vers la
vidéo pour permettre aux internautes de la télécharger.
Adaptez la page à votre site en modifiant les couleurs et le style du texte.
Pour finir, mettez à jour la barre de navigation sur toutes les pages du site.
Lorsque vous serez satisfait de votre site, déposez-le
(fichier zip) dans le lecteur partage
5