Insérer des vidéos

Internet statique et dynamique
HTML et Multimédia
Programmation de sites web statiques et dynamiques
Pages Web et Multimédia
Jean CARTIER
MASTER INI
[email protected]
Internet statique et dynamique
HTML et Multimédia
Insérer des images
Possibilité d ’insérer des images de type GIF, JPEG (24 bits), PNG
<IMG SRC="nomdufichier" border="tailleenpixel" width="taille" height="taille">
SRC :
nom du fichier précédé de son chemin éventuel (relatif ou absolu)
border : taille de la bordure autour de l'image
width : taille de l'image en pixel
ou en pourcentage de la taille réelle (redéfini la taille de l'image)
height : taille de l'image en pixel
ou en pourcentage de la taille réelle (redéfini la taille de l'image)
Internet statique et dynamique
HTML et Multimédia
Insérer des sons
Possibilité d ’insérer des sons de type divers
Midi :
<EMBED SRC="MissionImpossible.mid">
Wav, Aiff
<EMBED SRC="BUTTON2.WAV">, <EMBED SRC="BUTTON3.AIFF">
Mov (quicktime) : <EMBED SRC="nom_du_fichier.mov">
Attribut de la balise :
SRC : Le nom du fichier à adapter
Width, Height : La taille de l'espace réservé au son (ici juste assez pour montrer le contrôleur.)
CONTROLLER : Détermine si le contrôleur apparaît (true=oui, false=non)
LOOP : Détermine si le son joue en boucle (true / false)
AUTOPLAY : Démarre automatiquement au chargement de la page (true / false)
PLUGINSPAGE : Décrit où il faut aller chercher le plugin si il manque.
Exemple : <EMBED
SRC="nom_du_fichier.mov" PLUGINSPAGE="http://www.quicktime.com"
WIDTH="160" HEIGHT="16" CONTROLLER="true" LOOP="false" AUTOPLAY="false">
Autres types (en fonction des logiciels installés sur l'ordinateur client).
Attention aux codecs utilisés.
Internet statique et dynamique
HTML et Multimédia
Insérer des vidéos
Possibilité d ’insérer des vidéos. En fonction des lecteurs intégrés sur
le poste de l'internaute d'où prévoir plusieurs versions et en différentes qualité.
<EMBED SRC="sample.mov" WIDTH=145 HEIGHT=160 ALIGN="middle">
Internet statique et dynamique
HTML et Multimédia
Insérer des vidéos
Exemple complexe de vidéo real avec interaction :
<embed name="video" type="audio/x-pn-realaudio-plugin"
console="Clip1" controller="TRUE" controls="ImageWindow"
src="rtsp://127.128.129.130/rep_real/nom_fic.rm"
height="144" width="191" autostart="true">
<br>
<embed width="191" height="24" controls="ControlPanel"
type="audio/x-pn-realaudio-plugin" autostart="true"
console="Clip1">
<br>
<a href="javascript:document.video.SetPosition(0)">
Debut de la video</a><br>
<a href="javascript:document.video.SetPosition(115500)">
Milieu de la video</a>
Cadre de la vidéo
Cadre du contrôleur
Pointe au début de la vidéo
Pointe sur une image
de la vidéo
Internet statique et dynamique
HTML et Multimédia
Insérer des vidéos
Exemples de mises en pages avancées
Internet statique et dynamique
HTML et Multimédia
Insérer une animation Flash :
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=6,0,47,0"
id="animation" width="277" height="311">
<param name="movie" value="adresse/animation_flash.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<embed src="adresse/animation_flash.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="277" height="311">
</embed>
<noembed>Texte alternatif pour les navigateurs qui ne peuvent pas afficher le flash
ou image en GIF animé, par exemple.
</noembed>
</object>
Internet statique et dynamique
HTML et Multimédia
Prendre en compte les capacités des utilisateurs :
Internet statique et dynamique
HTML et Multimédia
Ressources
Tutoriaux HTML :
www.allhtml.com
Tutoriaux DreamWeaver :
http://www.webyo.net/dreamweaver/
Ressources Internet :
http://www.falkenzone.com
http://www.computerarts.co.uk/tutorials/
http://www.graphiland.fr/tutorials.asp
http://www.lewebfacile.net/