1. LES BALISES D'INSERTION D'OBJETS MULTIMEDIA

Transcription

1 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. LES 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> 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. INSERTION 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

2 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"> 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. INSERTION 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

3 <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"> 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. INSERTION D'UN OBJET FLASH 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" /> 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 ( : * 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

4 blclock.swf filclock.swf chenille.swf ver3d.swf feudartifice.swf serpentin.swf shootwave.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"/> 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

5 Et voici quelques exemples de regroupement de cellules d un tableau qui peuvent vous être utiles : REGROUPEMENT DE COLONNES <table width="75%" border="1"> <td colspan="2">ligne1, colonne 1 et 2</td> <td>ligne1, colonne3</td> <td>ligne2, colonne1</td> <td>ligne2, colonne2</td> <td>ligne2, colonne3</td> </table> REGROUPEMENT DE LIGNES <table width="75%"> <td rowspan="2">ligne 1 et 2, colonne1</td> <td>ligne1, colonne2</td> <td>ligne1, colonne3</td> <td>ligne2, colonne2</td> <td>ligne2, colonne3</td> </table> 6. MISE 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