Insérer un fichier Multimédia sur votre site HTML
Voici quelques exemples d'insertions de fichiers multimédias : insérer un son, une musique, un plan d'accès Google ou une vidéo provenant de YouTube. Un jeu d'enfant...
1. Insérer un son lors de l'ouverture de la page HTML
Dans le cas ci-dessous, le fichier son sera formaté (ou convertit) au format .wav et placé dans le répertoire du site html (éventuellement dans un dossier spécifique nommé sons par exemple).
Exemple :
Exemple :
CODE SOURCE :
<EMBED SRC="http://users.skynet.be/guy.cuvelier/html/son2.wav" WIDTH=300 HEIGHT=50 AUTOSTART="true">
<BG SOUND="http://users.skynet.be/guy.cuvelier/html/son2.wav" WIDTH=300 HEIGHT=50 AUTOSTART="true">
Explication de la syntaxe :
WIDTH=300 HEIGHT=50 : définit les dimensions du lecteur multimédia.
AUTOSTART="true" : permet de déclarer le lancement du son à l'ouverture de la page si la valeur est "true". Le lancement du son devient manuel avec la valeur "false".
<EMBED SRC="http://users.skynet.be/guy.cuvelier/html/son2.wav" WIDTH=300 HEIGHT=50 AUTOSTART="true">
<BG SOUND="http://users.skynet.be/guy.cuvelier/html/son2.wav" WIDTH=300 HEIGHT=50 AUTOSTART="true">
Explication de la syntaxe :
WIDTH=300 HEIGHT=50 : définit les dimensions du lecteur multimédia.
AUTOSTART="true" : permet de déclarer le lancement du son à l'ouverture de la page si la valeur est "true". Le lancement du son devient manuel avec la valeur "false".
2. Proposer la lecture d'un fichier .mp3 dans une page HTML
Dans le cas ci-dessous, le fichier son sera formaté (ou convertit) au format .mp3 et placé dans le répertoire du site html (éventuellement dans un dossier spécifique nommé mp3 par exemple).
Exemple :
Exemple :
CODE SOURCE :
<A HREF="mp3/musique.mp3">Cliquez sur ce lien pour écouter de la musique...</A>
Explication de la syntaxe :
Il ne s'agit que d'un simple lien <A HREF="...">...</A> vers le fichier mp3 en question.
Le reste est réalisé par le navigateur lui-même...
3. Insérer une vidéo provenant de Youtube
Les sites de publications et de partage de vidéo sont de plus en plus nombreux à proposer un code HTML d'intégration, pour insérer aisément les vidéos partagées sur vos pages html.
Rendez-vous par exemple sur le site de www.youtube.com, choisissez une vidéo et copiez-collez le code proposé dans le code source (entre les balises <BODY> de votre page web).
Exemple :
Rendez-vous par exemple sur le site de www.youtube.com, choisissez une vidéo et copiez-collez le code proposé dans le code source (entre les balises <BODY> de votre page web).
Exemple :
Code source :
<iframe width="420" height="315" src="http://www.youtube.com/embed/jfjIU6ECjv8" frameborder="2" allowfullscreen></iframe>
Explication de la syntaxe : Tout simple !...
<iFrame> est une balise qui fait appel à un cadre extérieur au site. Sa taille est définie par les balises width et height.
SRC définit l'adresse URL de la vidéo dont le bord est défini par l'attribut frameborder.
<iframe width="420" height="315" src="http://www.youtube.com/embed/jfjIU6ECjv8" frameborder="2" allowfullscreen></iframe>
Explication de la syntaxe : Tout simple !...
<iFrame> est une balise qui fait appel à un cadre extérieur au site. Sa taille est définie par les balises width et height.
SRC définit l'adresse URL de la vidéo dont le bord est défini par l'attribut frameborder.
4. Insérer un plan d'accès dynamique provenant de Google Map
Avec Google Map http://maps.google.be/maps, c'est devenu un jeu d'enfant d'ajouter un plan d'accès interactif sur son site web!
Il suffit de se rendre sur le site, d'entrer l'adresse qui sera le point d'arrivée de votre plan, et de copier le code HTML réservé aux webmaster (code d'intégration).
On le place bien entendu entre les balises BODY dans le code source de la page.
Le résultat est garantit!
Exemple :
Ci-dessous, le plan des locaux de GIAL, 95 Bd Emile Jacqmain à 1000 Bruxelles
(lieu de la formation)
Il suffit de se rendre sur le site, d'entrer l'adresse qui sera le point d'arrivée de votre plan, et de copier le code HTML réservé aux webmaster (code d'intégration).
On le place bien entendu entre les balises BODY dans le code source de la page.
Le résultat est garantit!
Exemple :
Ci-dessous, le plan des locaux de GIAL, 95 Bd Emile Jacqmain à 1000 Bruxelles
(lieu de la formation)
Code source :
<iframe width="425" height="300" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://maps.google.be/maps?f=q&source=s_q&
hl=fr&geocode=&q=Boulevard+Emile+Jacqmain,+95&aq=&
sll=50.853926,4.354124&sspn=0.006489,0.013711&
g=Boulevard+Emile+Jacqmain,+95&ie=UTF8&hq=&
hnear=Boulevard+%C3%89mile+Jacqmain+95,+1000+Bruxelles&ll=50.853927,
4.354126&spn=0.003244,0.006856&z=14&output=embed"></iframe>
<BR>
<small><A HREF="http://maps.google.be/maps?f=q&source=embed&hl=fr&geocode=&q=
Boulevard+Emile+Jacqmain,+95&aq=&sll=50.853926,4.354124&sspn=0.006489,
0.013711&g=Boulevard+Emile+Jacqmain,
+95&ie=UTF8&hq=&hnear=Boulevard+%C3%89mile+Jacqmain+95,
+1000+Bruxelles&ll=50.853927,4.354126&spn=0.003244,0.006856&z=14"
>Agrandir le plan</A></small>
Ce code source est simplement issus d'un copier-coller du code d'intégration proposé par Google Map...
EXERCICE : Récupérez le code source de la page suivante et copiez le contenu sur une nouvelle page web...