Cours de HTML
Contrôle du son et de la vidéo
G. Chagnon
Comment insérer du contenu multimédia dans une page Web ?
html, object, embed, param
Bien que le son et la vidéo soient le propre du multimédia, les navigateurs ne sont pas capables de les exécuter seuls : ils disposent d'une architecture ouverte qui leur permet de faire appel à des programmes supplémentaires externes. Ce sont les plug-in.
Par exemple, cliquer sur ce point d'interrogation . Vous ferez appel implicitement au plug-in par défaut de lecture d'un son du type wav
. Ce plug-in par défaut dépend des configurations de la machine de l'utilisateur : selon les installations, ce pourra être MédiaPlayer, le magnétophone de Windows...
Ces programmes sont souvent installés avec le navigateur ou bien disponibles, généralement gratuitement, sur Internet.
Il est possible de visualiser sous Netscape Navigator, l'ensemble des plug-in disponibles pour ce navigateur. Il suffit d'effectuer le cheminement suivant : Help>A propos des modules externes
. Cet enchaînement lance un JavaScript
capable d'analyser ce qui est disponible. Lancer cette commande et examiner le résultat.
L'apparition des plug-ins revient à NetScape avec la version 2 de Navigator : grâce aux plug-ins, il est devenu alors possible de lire n'importe quel type de fichier à même la fenêtre du navigateur. La réaction de MicroSoft fut alors de reprendre le concept de plug-in et de l'approfondir : ce fut la technologie ActiveX
(ActiveX
est un langage de script utilisant les technologies Visual Basic et OLE). Les détails techniques sur cette différence d'approche et de mise en oeuvre sortent du cadre de ce cours ; nous retiendrons simplement que Netscape Navigator et Internet Explorer ne partagent pas la même approche des modules externes. L'effet principal est de nous compliquer (encore une fois !) la tâche.
Il est possible de visualiser sous Internet Explorer, l'ensemble des objets Active disponibles pour ce navigateur. Il suffit d'effectuer le cheminement suivant : Outils>Option Internet>Paramètres (sous l'onglet Général)> Afficher les Objets
.
On pourra visualiser les propriétés de ces objets par un clic droit de la souris. On notera l'identifiant de classe (classid) utile pour l'appel de l'objet ActiveX dans la page HTML.
Cette balise, initialement introduite par Netscape, ne fait même plus partie de la recommandation HTML
Transitionnel du W3C. Elle permettait d'insérer dans la page HTML
l'exécution du plug-in correspondant au type du fichier.
Le W3C recommande l'utilisation de la balise ]]>
.
La balise ]]>
est utilisée pour inclure images, séquences video, applets Java et interfaces VRML. Cette balise est prévue pour remplacer les balises à usage plus limité ]]>
et ]]>
, ainsi que les éléments propriétaires ]]>
et ]]>
, en dépit de problèmes relatifs à son support par les navigateurs. Dans la mesure du possible, on continuera donc à utiliser les balises ]]>
et ]]>
.
Cette balise accepte plusieurx attributs principaux :
data
: spécifie l'URI (adresse) de l'objet inséré.
- Les attributs
width
et height
définissent les dimensions de l'objet. La valeur peut être exprimée en nombre de pixels ou en pourcentages de la taille de l'élément contenant l'objet. Attention : la plupart des navigateurs requièrent la présence de ces attributs.
classid>
peut être utilisé pour définir une implémentation permettant la gestion de l'objet. Cela est le cas pour les applets Java et Python, les contrôles ActiveX, ainsi que le montre l'exemple suivant...
yahtzee.py
application/x-python
Prêt pour un petit Yahtzee?
Mon Yahtzee
java:Yahtzee.class
application/java
400
250
Prêt pour un petit Yahtzee?
Mon Yahtzee
yahtzee.gif
image/gif
Une animation Yahtzee
200
100
Yahtzee est mon jeu favori.
Cet exemple montre aussi une solution afin de permettre aux navigateurs qui ne peuvent supporter le type d'objet, d'afficher une alternative. Dans cet exemple, le jeu écrit en Python
est utilisé si le navigateur le supporte. Au cas où cela ne serait pas possible, une version Java est disponible. Une troisième possibilité est offerte avec l'affichage d'une image, et enfin une dernière alternative est disponible avec du texte brut. Cette possibilité préserve la compatibilité avec les plus anciens navigateurs, qui ignoreront les éléments ]]>
, et se contenteront d'afficher le texte.
L'exemple précédent utilise également les attributs type
et codetype
pour aider les navigateurs à déterminer la nature des fichiers en jeu : cela leur évite ainsi de tenter de charger un type de fichier qu'ils ne savent pas gérer. L'attribut type
indique le type de média de la ressource référencée par l'attribut data
, tandis que l'attribut codetype
indique le type de média de la ressource référencée par l'attribut classid
.
L'attribut standby
est aussi utilisé dans l'exemple précédent. Il fournit un court texte affiché dans la fenêtre pendant le chargement de l'objet.
L'élément ]]>
peut contenir des éléments ]]>
, avant tout autre élément-enfant, permettant de spécifier un certain nombre de propriétés qui sont transmises aux objets multimédia chargés. Par exemple,
java:Clock.class
application/java
100
100
Une horloge en temps réel!
Quelle heure est-il?
typeanalog
bgcolorwhite
fgcolornavy