Insertion d'Objets Multimédias

Présentation au sujet: "Insertion d'Objets Multimédias"— Transcription de la présentation:

1 Insertion d'Objets Multimédias
2 balises : Balise <object> … </object> Cet élément permet d'inclure un objet arbitraire dans un document HTML: Control ActiveX (MIE propriétaire), Objets multimédia (images, son et vidéo), document HTML, applet Java… Utilisation de l'attribut data Utilisation de la balise <object> attributs data, type , width et height data: URL de l'image, de la page web type: type MIME de l'objet width, height: largeur et hauteur de l'objet (px, %) Comparaison avec la balise <img> classique

2 type_mime_principal / sous_type_mime
Type MIME de l'Objet MIME = Multipurpose Internet Mail Extension Le type MIME est utilisé pour : Spécifier le type d'un document attaché à un courriel Spécifier le type du document transféré par le protocole HTTP (le serveur envoie en premier le type MIME d'un objet au navigateur, afin que ce dernier puisse le réceptionner et le traiter) Le type MIME s'écrit de la façon suivante : type_mime_principal / sous_type_mime

3 Balise <object> … </object>
Utilisation de l'attribut classid Quelques attributs classid, width et height, codebase. La valeur de l'attribut classid (CLasSIDentifier) est de la forme: classid="clsid:object-id" , est indique quel software / player doit être utilisé, ou fait référence à un contrôle ActiveX L'attribut codebase="url" indique au navigateur l'URL de téléchargement du contrôle ActiveX, ou du plug-in. Exemple pour le plug-in Flash : Télécharger ActiveX helper :

4 Balise <embed> … </embed>
Quelques attributs src, width et height, pluginspace. L'attribut src (source) contient l'URL du fichier joué par le plug-in (ex. fichier flash joué par le plug-in Flash) L'attribut pluginspage="url" indique au navigateur l'URL de téléchargement du plug-in. Exemple pour le plug-in Flash :

5 Contrôle des paramètres de l'objet multimédia
Balise <embed> … </embed> Les paramètres de l'objet sont passés directement dans la balise <embed> suivant la syntaxe : Les paramètres dépendent du type d'objet inséré, et seules certaines valeurs sont permises. Liste des paramètres/attributs, et de leurs valeurs, pour l'intégration d'un objet Flash à l'aide la la balise <embed> :

6 Balise <object>
Ici, une balise dédiée pour le passage des paramètres, est imbriquée entre la balise <object> … </object> : 2 attributs name et value. La valeur de l'attribut name est le nom de la propriété. L'attribut value contient la valeur de la propriété défini. Chargement d'une animation flash : La valeur movie de l'attribut name permet de spécifier l'URL du fichier .swf comme valeur de l'attribut value, définition équivalente à l'URL de l'attribut src de la balise <embed>. Liste des propriétés de l'ActiveX Shockwave.Flash :

7 En général, on précise les 2 balises <object> et <embed> pour insérer un objet multimédia dans une page HTML. Notez la correspondance entre les valeurs des attributs name et value de la balise <param>, et les propriétés / attributs de la balise <embed>. Attention : la balise <embed> serait obsolète en XHTML, donc déconseillée! EX. Flash :

8 Exemples d'insertion d'objets (contrôle ActiveX) par la balise <object>
Insertion d'une image <object data="europe.jpg" type="image/jpeg" width="243px" height="181px" > </object> Comparaison avec la balise img classique Insertion d'une page web <object data=" height="100%" width="100%"> </object> Insertion d'un son <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <param name="FileName" value="drums.wav" /> </object> Insertion d'une vidéo <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <param name="FileName" value="numberULmpeg1.mpg" /> </object> Insertion d'un control d'un curseur <object classid="clsid:F08DF D1-B16A-00C0F " id="Slider1" width="100" height="50"> <param name="BorderStyle" value="1" /> <param name="MousePointer" value="0" /> <param name="Enabled" value="1" /> <param name="Min" value="0" /> <param name="Max" value="10" /> </object>

9 Affichage d'un calendrier
<object width="100%" height="80%" classid="clsid:8E27C92B C-8A2F C02"> <param name="BackColor" value=" "> <param name="DayLength" value="1"> </object> Dessiner un graphique <object width="200" height="200" classid="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6"> <param name="Line0001" value="setFillColor(255, 0, 255)"> <param name="Line0002" value="Oval(-100, -50, 200, 100, 30)"> </object> Insertion d'une animation flash <object width="400" height="40" classid="clsid:D27CDB6E-AE6D-11cf-96B " codebase=" <param name="SRC" value="fichier.swf"> </object>

10 Les tableaux HTML <table> … </table>
5 premiers attributs width, height, border, cellspacing et cellpadding Dimension de la bordure (border), espacement entre les cellules (cellspacing), et marges pour le contenu d'une cellule (cellpadding). Dimensions du tableau par rapport à son conteneur (fenêtre du navigateur, une cellule d'un tableau…). Valeurs en pixel. La longueur (width) et la hauteur (height) s'exprime en pixel ou en % de la dimension du conteneur.

11 Lignes du tableau <tr> … </tr>
Principaux attributs height, align et valign. Les autres étant obsolètes ! Left center rigth justify top middle bottom baseline Alignement horizontale et vertical des contenus des cellules du tableau, qui seront définies dans cette ligne.

12 Cellule d'une ligne <td> … </td>
Ordre de déclaration (structure) : tableau  ligne  cellule T.O.M Contenu de la cellule (tout code HTML) Déclaration d'une ligne. Déclaration d'une cellule. Déclaration du tableau. Dans une ligne, le nombre de cellules déclarées impose le nombre de colonnes. Il doit donc y avoir autant de cellules de déclarées dans chaque ligne, sauf ...

13 Les balises <td>… </td> : déclaration d'une cellule
Les 4 principaux attributs width, height, colspan et rowspan Fusion de cellules sur une ligne (colspan - la cellule s'étend sur nb colonnes), ou sur une colonne (rowspan - la cellule s'étend sur nb lignes). La largeur (width) et la hauteur (height) s'exprime en pixel ou en % de la dimension du conteneur. La cellule la plus large impose la largeur de la colonne, la cellule la plus haute impose la hauteur de la ligne. La dimension de la cellule dépendra alors de son contenu. Le contrôle de la dimension sera une étape délicate et importante de la conception et du design. Note: le contenu d'une cellule ne doit jamais être vide. Astuce: utiliser   (no break space) qui est un vide. Mais la cellule n'est plus vide! Ou insérer une image à fond transparent de taille 1x1 pixels, et en forçant une largeur égale à la largeur de cellule voulue. Attention: dans le cas de   , la hauteur de cellule est forcée à celle de la taille d'un caractère! Une image de taille 1 x 1 pixel est alors préférable, et permet une hauteur de ligne de 1 pixel par ex.

14 Design d'une page par la technique des tableaux HTML
Novos Excludat iurgia finis, Est vetus atque probus, centum qui perficit annos. Quid, qui deperiit minor uno mense vel anno, inter quos referendus erit Veteresne poetas. Novos Excludat iurgia finis, Est vetus atque probus, centum qui perficit annos. Quid, qui deperiit minor uno mense vel anno, inter quos referendus erit Veteresne poetas, an quos et praesens et postera respuat aetas Iste quidem veteres inter ponetur honeste, quirendus erit Veteresne poetas, an quos et praesens et postera respuat el mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et virtutem, equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et virtual. Novos Excludat iurgia finis, Est vetus atque probus, centum qui perficit annos. Quid, qui deperiit minor uno mense vel anno, inter quos referendus erit Veteresne poetas, an quos et praesens et postera respuat aetas Iste quidem veteres inter ponetur honeste, quirendus erit Veteresne poetas, an quos et praesens et postera respuat el mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et virtutem. Novos Excludat iurgia finis, Est vetus atque probus, centum qui perficit annos. Quid, qui deperiit minor uno mense vel anno, inter quos referendus erit Veteresne poetas, an quos et praesens et postera respuat aetas Iste quidem.